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

查看:55
本文介绍了鼠标位置-跨浏览器兼容性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用Javascript中的鼠标有时会遇到以下事件属性:

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
  • 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.

推荐答案

这是jQuery的实现方式:

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);
}

测试pageX(或pageY)或从clientX和scrollLeft和clientLeft计算

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆