原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种
- event.clientX/Y
- event.pageX/Y
- event.offsetX/Y
- event.layerX/Y
- event.screenX/Y
clientX/Y:
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变
兼容性：所有浏览器均支持
pageX/Y:
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
设置<body style="width:2000px;height:200px;">让页面滚动，发现clientX与pageX的值不一样
兼容性：除IE6/7/8不支持外，其余浏览器均支持
offsetX/Y:
offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y:
layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y:
screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变
兼容性：所有浏览器均支持
/*我测试的clientX ，pageX代码*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#wrap{
margin:30px auto;
width:500px;
height:200px;
border:1px solid #ccc;
text-align: center;
overflow: scroll;
}
#wrap p{
display: block;
height:400px;
}
</style>
</head>
<body style="height:2000px; width:20000px">
<div id="wrap">
<p>测试pageX和clientX的区别</p>
</div>
<script>
window.onload=function(){
var oDiv = document.getElementById('wrap');
oDiv.onclick = function(e){
e = e || window.event;
console.log('e.clientX:'+e.clientX);
console.log('e.pageX:'+e.pageX);
} }
</script>
</body>
</html>
原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- JS 获取鼠标坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- 现代浏览器原生js获取id号方法
<div id="tests" class="a b c" style="color:#f00">123</div> ...
- 多兼容的JS获取鼠标坐标
//第一.相对于屏幕 function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':sc ...
- 兼容各版本浏览器,封装原生Js获取ClassName
web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
随机推荐
- nginx静态资源文件无法访问，403 forbidden错误
在安装 nginx 服务器后,我想把网站的根目录设置为 /root/www/ ,于是对 nginx 的 nginx.conf 文件进行配置 先打开 nginx.conf #user nobody; w ...
- mybatis_12延时加载_懒加载
延时加载:也叫懒加载 2.1 延迟加载 延迟加载又叫懒加载,也叫按需加载.也就是说先加载主信息,在需要的时候,再去加载从信息. 在mybatis中,resultMap标签 的association标签 ...
- MyBatis中映射器Mapper概述
MyBatis真正强大之处在于它的映射器.因为它异常强大并且编写相对简单,不仅比传统编写SQL语句做的更好并且能节省将近95%的代码量 XML中顶级元素汇总 cache: 给定命名空间的缓存配置 ca ...
- Node.js性能分析神器Easy-Monitor
摘要: 使用Easy-Monitor,可以准确定位Node.js应用的性能瓶颈,帮助我们优化代码性能. 当应用出现性能问题时,最大的问题在于:如何准确定位造成性能瓶颈的代码呢?对于Node.js开发者 ...
- ES6之Spread Operater拷贝对象
译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...
- es6 语法 （set 和 map）
{ let list = new Set(); list.add(5); list.add(7); console.log('size', list, list.size); //{5, 7} 2 } ...
- SAP MM 销售订单库存与普通库存之间相互转换过账后对于EBEWH以及MBEWH表的更新
SAP MM 销售订单库存与普通库存之间相互转换过账后对于EBEWH以及MBEWH表的更新 1,DEMO数据 物料号:1300009995 工厂:2160 销售订单号/item号:0010097627 ...
- JVM调优（二）经验参数设置
调优设置具体解析 堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5 ...
- View体系第一篇:基础
View体系的学习内容为学习刘望舒先生博客总结的内容,大家可到他的博客看到更详细的内容. 一.view之间的继承关系 Viewground用来包裹其他view.在平常的使用中,我们不会直接用到View ...
- (后端)springboot 在idea中实现热部署(转)
自己用到了iIntelliJ IDEA 这个ide工具,但是和以前的工具写html,css,js直接刷新页面不同,这个需要去热部署,网上搜的解决方法: SpringBoot的web项目,在每一次修改了 ...