JS | JS中获得鼠标位置的属性有哪些？

目录

一、e.pageX，e.pageY

二、e.clientX，e.clientY

三、e.screenX，e.screenY

四、e.offsetX，e.offsetY

五、pageXOffset、pageYOffset

e.pageX/Y、e.clientX/Y、e.screenX/Y、e.offsetX/Y的区别 

一、e.pageX，e.pageY

e.pageX，e.pageY：返回的值是相对于文档的定位，即鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的。文档的左上角为(0,0)，向右为正，向下为正，IE7，8不支持（不包含上方工具栏）；

如果你想要获取鼠标在整个页面中的位置，即鼠标指针在页面上的X和Y坐标（包括滚动条），可以使用pageX和pageY属性。

注意：IE7，8中没有pageX 和 pageY，只有用document.documentElement.scrollLeft+event.clientX来求出。 

二、e.clientX，e.clientY

e.clientX，e.clientY：返回的值是相对于屏幕可见区域的坐标，如果页面有滚动条，被滚动条隐藏的那部分不进行计算，也可以说是相对于屏幕的坐标，但是不计算上方的工具栏（不包含上方工具栏）。即鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标；所有浏览器都支持。

在JavaScript中，可以使用事件对象的clientX和clientY属性来获取鼠标在当前窗口的位置。即鼠标指针在视口中的X和Y坐标（不包括滚动条）

clientWidth, clientHeight：包含 width+padding，不包含border;
scrollWidth,scrollHeight：包含 width+padding，不包含border;
offsetWidth, offsetHeight：包含 border+padding+width；
style.width, style.height：包含width，不包含border+padding

三、e.screenX，e.screenY

e.screenX，e.screenY：返回的是相对于屏幕的坐标，浏览器上面的工具栏（包含上方工具栏）；即鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了；全兼容。

screenX和screenY属性可以获取鼠标在屏幕上的位置，即鼠标指针在屏幕上的X和Y坐标。

四、e.offsetX，e.offsetY

e.offsetX，e.offsetY：表示鼠标位置相对于当前元素左上角的水平、垂直偏移量。‌

其中e.offsetX表示鼠标在元素内部的水平偏移量，e.offsetY表示鼠标在元素内部的垂直偏移量。这两个属性通常用于获取鼠标在特定元素内的位置信息，帮助开发者实现更精确的交互效果和位置计算。

需要注意的是，e.offsetX和e.offsetY的坐标原点在元素的左上角，水平方向向右为正，垂直方向向下为正。这些属性主要用于获取鼠标在特定元素内的位置，而不是在整个页面或浏览器窗口中的位置。因此，它们在处理鼠标事件时非常有用，尤其是在需要精确控制元素内鼠标位置的情况下‌。

五、pageXOffset、pageYOffset

pageXOffset 和 pageYOffset：属性返回文档在窗口左上角水平和垂直方向滚动的像素。

① pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

② pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性  =  scrollX 和 scrollY 属性。这些属性是只读的。

示 例：垂直和水平滚动 100 个像素的内容，并弹出 pageXOffset 和 pageYOffset：

window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);

小结：‌在JavaScript中，获取鼠标位置的属性

JavaScript并没有mouse对象，获取鼠标坐标要靠强大的event对象。我们通过监听document的mousemove，就可以实时获得鼠标位置。

在JavaScript中，并没有直接名为“mouse”的内置对象。然而，当处理鼠标事件时，你可以通过事件对象（通常命名为event）来访问与鼠标事件相关的各种属性和方法。这些属性和方法提供了关于鼠标事件（如点击、移动等）的详细信息，比如鼠标的位置、按下的按钮等。

‌在JavaScript中，获取鼠标位置的属性主要有以下6组：

1. ‌clientX和clientY‌：这两个属性返回鼠标相对于浏览器窗口可视区域的水平和垂直坐标。可以使用这两个属性来获取鼠标相对于浏览器窗口的位置‌。

2. ‌pageX和pageY‌：这两个属性返回鼠标相对于整个文档页面的水平和垂直坐标。可以使用这两个属性来获取鼠标相对于文档页面的位置‌。

3. ‌target‌：这个属性返回触发事件的元素。可以使用这个属性来获取鼠标事件的目标元素‌

4. ‌layerX和layerY‌：这两个属性返回鼠标相对于元素本身的水平和垂直坐标，但不包括滚动条滚动部分‌。可以用来代替offsetX与Y。ie9中的layerX与Y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，比如我的例子的代码，把滚动条拖到最右边，鼠标从空白慢慢移动到大DIV上，此时大DIV的最右边与第一个DIV的最右边的差值也会算进layerX中。后头元素越来越多，这个计算就越复杂，而firefox与chrome的layerX则没有这个问题。所以，不要在IE9中使用layerX

5. ‌offsetX和offsetY‌：这两个属性返回鼠标相对于元素边界盒的水平和垂直坐标，包括滚动部分‌。

6. ‌screenX和screenY‌：这两个属性返回鼠标相对于整个屏幕的水平和垂直坐标‌。

7. ‌x和y‌：这两个属性也可以用来获取鼠标的坐标，但兼容性不如上述属性好‌。x与y，同标准浏览器的layerX与Y，是IE中可以用来代替layerX的属性。在chrome中，x与y虽然有值，但是是和clientX与Y完全相同！ 所以，不建议使用x,y属性。

演示如何在鼠标移动时获取这些属性，‌示例代码‌：

document.addEventListener('mousemove', function(event) {
  // 鼠标在当前窗口的水平位置和垂直位置
  console.log("Client Coordinates: (" + event.clientX + ", " + event.clientY + ")");
  // 鼠标在页面文档的水平位置和垂直位置
  console.log("Page Coordinates: (" + event.pageX + ", " + event.pageY + ")");
  console.log("Target Element: " + event.target);
  console.log("Layer Coordinates: (" + event.layerX + ", " + event.layerY + ")");
  console.log("Offset Coordinates: (" + event.offsetX + ", " + event.offsetY + ")");
  // 鼠标在屏幕的水平位置和垂直位置
  console.log("Screen Coordinates: (" + event.screenX + ", " + event.screenY + ")");
});

在上述代码中，当鼠标在页面上移动时，会打印出鼠标的各种位置属性。 

番外：以下是JQuery中关于获取鼠标位置的方法  ——了解

下面说一下关于.offset()，.position()，.scrollTop()，.width()，.innerWidth()，.outerWidth()的区别：

.offset()

① .offset().top：返回元素距离文档上方的距离；

② .offset().left：返回的是元素距离文档左边的距离；

还可以自己进行设置，.offset({top:20,left:20});

.position()

.position().top：返回的是与被定位的祖先元素的偏移距离

① 如果他的父元素被定位了，不管是绝对新定位还是相对定位，返回的是与他的父元素的偏移距离；

② 如果他的父元素没有被定位，他的每一个祖先元素被定位了，则返回的是与他的祖先元素的偏移距离；

③ 如果都没有被定位，则返回的是相对于文档的偏移距离，与.offser().top返回值相同；

同理.position().left

.scrollTop() | .scrollLeft()

.scrollTop()如果一个元素有滚动条，则返回的是滚动条滚动的长度；

同理.scrollLeft()

.width() | .height()

.width()返回的是元素的宽度，这个宽度不包含padding，border，margin，同理.height()；

支持写操作，$n1.height( 20 );

.innerWidth() | .innerHeight()

.innerWidth() 返回的是元素的宽度，这个宽度包含padding，但不包含border与margin，同理.innerHeight()；支持写操作，$n1.innerWidth( 20 );

.outerWidth() | .outerHeight()

返回的是元素的宽度，这个宽度包含padding，border，但不包含margin，同理.outerHeight()；

.outerWidth(true)：此时返回的宽度也包含margin了

$('.wrap').width( function(index, width){
  return Math.max(width, 1200);//设置其最小宽度为1200px
} );

● 参考资料 ●

JavaScript：与获取鼠标位置有关的属性 - 博客园

JavaScript获取浏览器、元素、屏幕的宽高尺寸_51CTO博客