鼠标位置 - 跨浏览器兼容性 - Javascript [英] Mouse position - Cross browser compatibility - Javascript

问题描述

在Javascript中使用鼠标我偶尔会遇到以下事件属性：

• clientX，clientY


• layerX，layerY


• offsetX，offsetY


• pageX，pageY


• screenX，screenY


• x， y

我想知道他们的跨浏览器兼容性一般是什么样的，因为我只发现了比特和我试图修补的信息。

谢谢你们

解决方案

以下是jQuery的用法：

  //计算pageX / Y（如果缺少）和clientX / Y可用
 if（event.pageX == null&& event.clientX！= null）{
 var doc = document.documentElement，body = document.body; 
 event.pageX = event.clientX +（doc&& doc.scrollLeft || body&& body.scrollLeft || 0） - （doc&& doc.clientLeft || body& & body.clientLeft || 0）; 
 event.pageY = event.clientY +（doc&& doc.scrollTop || body&& body.scrollTop || 0） - （doc&& doc.clientTop || body& & body.clientTop || 0）; 
} 
  

测试pageX（或pageY）或从clientX和scrollLeft和clientLeft计算它/ p>

working with the mouse within Javascript I have occasionally met the following event attributes:

• clientX, clientY
• layerX, layerY
• offsetX, offsetY
• pageX, pageY
• screenX, screenY
• x, y

I'm wondering what their cross-browser compatibility looks like in general, as I have only found bits and pieces of info that I'm trying to patch up together.

Thanks guys

解决方案

Here is how jQuery does it :

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var doc = document.documentElement, body = document.body;
  event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc   && doc.clientTop  || body && body.clientTop  || 0);
}

Testing pageX (or pageY) or calculating it from clientX and scrollLeft ans clientLeft

这篇关于鼠标位置 - 跨浏览器兼容性 - Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！