JS基础篇--了解JS的clientX、pageX、screenX等方法来获取鼠标坐标详解

phodal 发布于2019-08-21 10:23 / 4296人阅读

摘要：相对浏览器窗口简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，的，属性分别表示鼠标点击位置相对于文档的左边距，上边距。

在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容

方法介绍

关于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获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。
兼容性：所有浏览器均支持

一张图来解释，如图所示：

鼠标点击位置坐标 相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。

function getMousePos(event) {
    var e = event || window.event;
    return {"x":e.screenX,"y":screenY}
}

相对浏览器窗口

简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距。于是类似的我们写出了这样的代码

function getMousePos(event) {
    var e = event || window.event;
    return {"x":e.clientX,"y":clientY}
}

相对文档

简单测试也没什么问题，但是clientX与clientY获取的是相对于当前屏幕的坐标，忽略页面滚动因素，这在很多条件下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？加上滚动的位移就可以了，下边我们试试怎么计算页面滚动的位移。

其实在Firefox下问题会简单很多，因为Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了。

在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop

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

GPU云服务器云服务器 js 求鼠标当前坐标获取鼠标坐标 js 获取后台数据的方法 js 获取经纬度坐标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85428.html

js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

摘要：什么是，文档对象模型。是万维网联盟的标准，定义了访问和文档的标准。在的标准中，是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容结构和样式。获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。什么是DOM? DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。...

toddmark 2019-08-23 12:00 评论0 收藏0
JavaScript学习总结（九）事件详解

摘要：布尔值表示捕获阶段调用事件处理程序，表示冒泡阶段通过对象的方法，也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是，当设置成时用以取消事件的默认行为与中的相同。其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做...

LiveVideoStack 2019-08-21 10:21 评论0 收藏0
screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?

摘要：意为偏移量，是被点击的元素距左上角为参考原点的长度，而和的参考点有所差异。下，是包含边框的，如图所示。而是不包含边框的，如果鼠标进入到区域，为返回负值，如图所示。 offsetX,offsetY offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差异。 Chrome下，offsetX offsetY是包含边框的，如图所示。showIm...

jemygraw 2019-08-22 15:56 评论0 收藏0
鼠标点击的各种坐标 (事件对象)

摘要：返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条，事件和标准事件都定义了这个属性返回鼠标指针的位置，类似于，但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平（垂直）窗口坐标。可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2...

xushaojieaaa 2019-08-23 14:51 评论0 收藏0
鼠标点击的各种坐标 (事件对象)

摘要：返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条，事件和标准事件都定义了这个属性返回鼠标指针的位置，类似于，但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平（垂直）窗口坐标。可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2...

xiongzenghui 2019-08-02 14:09 评论0 收藏0