screenX与offsetX与clientX的区别

clentX:光标距离浏览器可视区域的左上角距离。 screenX:光标距离显示器的左上角距离 offectX:光标距离当前元素左上角的距离。。

clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。

1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...

一、图解 如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象 二、概念 1、screenX 和screenY 参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对...

前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊，然后自己写了几个demo算是弄明白了，在这记录一下。 定义 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标。 可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度...

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性

一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到

pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也

screenX、clientX、pageX, offsetX的区别 一、图解 clientY、screenY、pageY、offsetY这四者是事件对象event上的属性 如图所示：假设紫色正方形中心处是点击处，紫色区域是鼠标事件触发对象 二、概念 1.screenX和screenY 参考点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2.clientX和clientY 参考点：浏览器内容区域左上角 cl

先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛

div{ height: 100px; width: 100px; background-color: red; } <div></div> var div = document.getElementsByTagName('div')[0]; div.onclick= function (e){ console.log(e) } ...

之前一直没有把offset，page，client和screen这几个属性弄得很清楚，今天花了点时间算是大体上了解了这几个属性的区别，所以把我了解到的写出来，也算是做个总结。 首先我们来看看这几个属性的解释： 1.offsetX：鼠标相对于事件源元素的X坐标，只有IE事件有这2个属性，标准事件没有对应的属性 2.pageX： 鼠标指针的位置，相对于文档的左边缘 3.clientX：返回当事

在 JavaScript 事件处理中，clientXpageXoffsetXscreenX是用于获取鼠标事件位置信息的属性，但它们各自代表不同的坐标系和参考点。

参考连接 clientX、offsetX、screenX、pageX区别 - 简书

offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...

这几个属性的区别说难不难，可是很容易搞混，很长一段时间没用，发现又忘记区别了，记不清哪个是哪个！真的很抓狂！ 区别： clientX、clientY： 相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。 pageX、pageY： 类似于clientX、clientY，但它们使用的是文档坐标而非窗口坐标。这2个属...

screenX,clientX,pageX,offsetX,pageXoffset的区别 event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性 event.clientX、event.clientY 鼠标相对于浏览器可视区域的X,Y坐标（将参照点改成了浏览器内容区域的左上角），可视区域不包括工具栏和滚动条。IE事件...