鼠标相对于屏幕的位置鼠标相对于窗口的位置和获取鼠标相对于文档的位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标相对于屏幕的位置鼠标相对于窗口的位置和获取鼠标相对于文档的位置相关的知识,希望对你有一定的参考价值。

一、screenX | screenY用于获取鼠标相对屏幕的位置
在IE9+和其他主流浏览器,获取鼠标相对屏幕的位置,代码如下:
function (ev){
   ev.screenX //获取鼠标相对于屏幕左边的距离
   ev.screenY //获取鼠标相对于屏幕顶部的距离
}
在IE浏览器下,获取鼠标相对屏幕的位置,代码如下:
function(){
   window.event.screenX //获取鼠标相对于屏幕左边的距离
   window.event.screenY //获取鼠标相对于屏幕顶部的距离
}
兼容所有浏览器情况下,获取鼠标相对屏幕的位置,代码如下:
function (ev){
   var ev = ev || window.event;
   ev.screenX //获取鼠标相对于屏幕左边的距离
   ev.screenY //获取鼠标相对于屏幕顶部的距离
}


二、clientX | clientY 获取鼠标相对于浏览器可视区域的位置
在IE9+和其他主流浏览器下,获取鼠标相对浏览器可视区域的位置,代码如下:
function (ev){
   ev.clienX //获取鼠标距离浏览器可视区域左边的距离
   ev.clienY //获取鼠标距离浏览器可视区域顶部的距离
}
在ie浏览器下,获取鼠标距离浏览器可视区域的位置,代码如下:
function (){
   window.event.clienX //获取鼠标距离浏览器可视区域左边的距离
   window.event.clienY //获取鼠标距离浏览器可视区域顶部的距离
}
兼容所有浏览器情况下,获取鼠标相对于浏览器可视区域的位置,代码如下
function (ev){
   var ev = ev || window.event;
   ev.clienX //获取鼠标距离浏览器可视区域左边的距离
   ev.clienY //获取鼠标距离浏览器可视区域顶部的距离
}


三、pageX | pageY 获取鼠标相对于文档的位置
在IE9+和其他主流浏览器下,获取鼠标相对于文档的位置,代码如下:
function (ev){
   ev.pageX //获取鼠标相对于文档的左边的距离
   ev.pageY //获取鼠标相对于文档的顶部的距离
}
在IE8以下浏览器包括IE8浏览器,如何获取鼠标相对于文档的位置??
获取鼠标相对于浏览器可视区域的位置 + 滚动条移动的距离 = 获取鼠标相对于文档的位置
解决方法一:
function(ev){
   try{
      //IE9+ 和 其他主流浏览器
      ev.pageX  //鼠标距离于文档的左面的距离
      ev.pageY  //鼠标距离于文档的顶部的距离
   }catch(err){
      //IE8 IE7 IE6
      window.event.clientX+document.documentElement.scrollLeft  //鼠标距离于文档的左面的距离
      window.event.clientY+document.documentElement.scrollTop   //鼠标距离于文档的顶部的距离
   }
}
解决方法二:
function (ev){
   var ev = ev || window.event;
   var sLeft = document.body.scrollLeft == 0 ? document.documentElement.scrollLeft : document.body.scrollLeft ;
   var sTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop ;
   ev.clientX + sLeft //获取鼠标距离浏览器可视区域左边的距离
   ev.clientY + sTop  //获取鼠标距离浏览器可视区域顶部的距离
}
注释:在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,而在IE、firefox下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop。

以上是关于鼠标相对于屏幕的位置鼠标相对于窗口的位置和获取鼠标相对于文档的位置的主要内容,如果未能解决你的问题,请参考以下文章

获取 SharpDX 中相对于窗口的鼠标位置

如何在javascript中获取鼠标相对于窗口视口的位置?

如何保持鼠标相对于屏幕的位置并忽略组件旋转?

client offset screen 的区别

client offset screen 的区别

原生JS中获取位置的方案总结