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

ゝ一纸荒年。 2022-07-11 05:41 361阅读 0赞

转自 [http://www.poorren.com/javascript-got-mouse-position/][http_www.poorren.com_javascript-got-mouse-position]

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

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

以上内容收集自网络

日常工作中，常用到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
        };
    };

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

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

[http_www.poorren.com_javascript-got-mouse-position]: http://www.poorren.com/javascript-got-mouse-position/