JavaScript 获取鼠标点击坐标五种方式及兼容性

网友投稿 1825 2022-05-30

转自 http://www.poorren.com/javaScript-got-mouse-position/

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

event.clientX/Y

event.pageX/Y

event.offsetX/Y

JavaScript 获取鼠标点击坐标五种方式及兼容性

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

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

以上内容收集自网络

日常工作中,常用到offsetX,下面提供两个据说比较靠谱的获取方案,兼容多浏览器,欢迎指正。

方案一(在使用,获取的是在当前页面内的全局坐标,若需要使用相对父级容器的坐标,可以使用jQuery的offset或者原生js等方式获取元素坐标,进一步计算,鼠标相对元素的相对坐标):

var getPosition = function(event) { var e = event || window.event; return { x: e.pageX || e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft, y: e.pageY || e.clientY + document.documentElement.scrollTop || document.body.scrollTop }; };

1

2

3

4

5

6

7

原生js获取元素所在坐标,用于计算鼠标在元素内的相对坐标

var getElPosition = function(el){ var t = el.offsetTop, l = el.offsetLeft; while( el = el.offsetParent){ t += el.offsetTop; l += el.offsetLeft; } return { x : l , y : t }; };

1

2

3

4

5

6

7

8

9

10

11

12

方案二(获取相对父级容器的坐标,但是这个方法在IE11模拟的IE8下好像有点问题,推荐采用第一种方案进行改进):

var getPosition = function(event){ var evt =event||window.event; var srcObj = evt.target || evt.srcElement; if (evt.offsetX){ return { x:evt.offsetX, y:evt.offsetY }; }else{ var rect = srcObj.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top } } };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

JavaScript 容器

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:01 Android系统之添加Product
下一篇:什么是Docker Compose
相关文章