关于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. Mondriaan的梦（状态压缩dp）

    题目原题可以看POJ2411,大意是给出m*n的矩形,要用2*1的矩形将它铺满(不能讲一个矩形铺在另外一个上面),求方案数,并且只要不是完全相同的就算不同的方案,也就是对称算不同的方案. F[i][s ...

  2. cmd打开控制面板及其他命令

    如果你在权限较小的域用户的机器上,要做一些管理操作,就不可避免的要使用cmd打开一些以前只能在图形界面里打开的程序.下面是我收集的一些常用操作. 以某个身份启动程序:runas /user:it\n1 ...

  3. C# 小规模查找集合性能测试

    项目中包含浮点运算,大概每秒 20 - 100 万左右. 其计算结果每秒只包含1000个左右. 因此大量运算是重复性的.程序运行时,cpu 在 3% - 10% 浮动.打算将结果缓存.根据键值索值. ...

  4. C-指针和数组的区别

    指针的操作: 允许:1)同类型指针的赋值 2)与整形的加减运算 3)指向同一数组内指针的减运算和比较 4)赋 ‘0’ 或与 ‘0’ 比较 不允许:1)两指针的相加,相乘除,位移或mask 2)与flo ...

  5. C++-标准输入输出

    1,cout 1) 用来向标准输出打印. 2) 如果参数是char*类型,则直接输出字符串.如果想要输出地址,则需要强制转换: <<static_cast<void*>(con ...

  6. 在线体验K2 BPM微信审批

    “微信审批”在江湖中传言已久,但很多人依然“只闻其声,未见其人”,这传说中的手感到底有多好?今天,我们就一起来揭开它的真面目吧. 故事发生在上周六傍晚,我接到了加班电话. 晚上21:30终于加完班了, ...

  7. a Makefile

    obj-m += showpid.o obj-m += ps.o all: make -C /lib/modules/$(shell uname -r)/build M=$(shell pwd) mo ...

  8. VM虚拟机中Ubuntu无法连接网络

    之前Ubuntu是可以上网的,但是今天打开后发现上不了网了,经过一番折腾,弄好了,记录下. 方案一:将网络连接设置为自定义NAT VM ->设置-> 硬件->网络适配器 这么已修改就 ...

  9. 如何为Eclipse设置代理

    看图,不解释:

  10. UIWebView stringByEvaluatingJavaScriptFromString的使用方法

    stringByEvaluatingJavaScriptFromString 使用stringByEvaluatingJavaScriptFromString方法,需要等UIWebView中的页面加载 ...