关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

  • event.clientX/Y
  • event.pageX/Y
  • event.offsetX/Y
  • event.layerX/Y
  • event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变

兼容性：所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

兼容性：除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获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

兼容性：所有浏览器均支持

原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. 原生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 ...

  3. JS 获取鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  5. 现代浏览器原生js获取id号方法

    <div id="tests" class="a b c" style="color:#f00">123</div> ...

  6. 多兼容的JS获取鼠标坐标

    //第一.相对于屏幕 function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':sc ...

  7. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  8. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  9. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

随机推荐

  1. BindingNavigator操作DatagridView的数据

    参考 http://wenku.baidu.com/link?url=NWfEfArPZvDO_aI-xEKBHVGoZY9wQO_Oty_GCsGLiPspheCzFYLf_dytuWAqN2_0A ...

  2. （DFS）hdoj1241-Oil Deposit

    #include<cstdio> ][]; ][]={{,},{,-},{,},{-,},{,},{,-},{-,},{-,-}},cnt; void dfs(int x,int y) { ...

  3. 可滑动的ToggleButton（开关）

    2013-12-28 17:25:01 网上看到一篇关于可滑动的ToogleButton的文章,有代码,觉得挺好,但是不符合我的要求,因此在他的代码基础上改了一些.(作者看到了勿喷啊,实在找不到原文了 ...

  4. 从python中copy与deepcopy的区别看python引用

    讨论copy与deepcopy的区别这个问题要先搞清楚python中的引用.python的内存管理. python中的一切事物皆为对象,并且规定参数的传递都是对象的引用.可能这样说听起来比较难懂,对比 ...

  5. HDU 5313 bitset优化背包

    题目大意: 添加尽可能少的边,最后使图形成二分图 一开始将图区分成一个个联通分量,根据二分图染色,计算出每个联通分量的黑色点和白色点的个数 希望添加的边最少,那么合并的时候,希望黑白块尽可能平均,这无 ...

  6. Codeforces Round #326 (Div. 2)-Duff in Love

    题意: 一个数x被定义为lovely number需要满足这样的条件:不存在一个数a(a>1),使得a的完全平方是x的因子(即x % a2  != 0). 给你一个数n,求出n的因子中为love ...

  7. println与toString()

      public class Test{ public static void main(String[] args) { Mankind mk=new Mankind(); System.out.p ...

  8. initWithFrame 和 initWithCoder

    当我们所写的程序里没用用Nib文件(XIB)时,用代码控制视图内容,需要调用initWithFrame去初始化 - (id)initWithFrame:(CGRect)frame { if (self ...

  9. Visual Studio 2015 预览版 - 支持跨平台开发Android/iOS应用程序(内置安卓模拟器)

    微软最近的惊人举动真多,对普通消费者Office 移动版宣布免费,对开发者也发布了完全免费的 VS2013 社区版! 不仅如此,就连 .Net 开发框架环境也竟然「开源」并且跨平台支持 Mac 及 L ...

  10. Hadoop c++开发

    假设你有上百G的数据,你要统计出这些数据中,含有某些你感兴趣的内容的数据的有多少条,你会怎么做?在硬件条件允许的情况下,用hadoop并行计算是一个不错的选择. 为了使本文得以清晰地说明,我们不妨假设 ...