兼容IE和firefox的javascript获取鼠标当前位置

用JS计算鼠标在页面上的位置并非难事,但由于IE和Firefox对获取鼠标当前位置的方法不同(IE为event.x|y,FF为event.pageX|Y),一般采用的是event.clientX代替两者,但当出现滚动条时event.clientX在IE和FF中的表现会略有不同。因此 js 获取鼠标当前位置也因各浏览器的区别而有所不同。下面介绍一种通用的获取鼠标在页面上的位置的方法。

  1. /** 
  2. * 获取鼠标在页面上的位置 
  3. * @param ev     触发的事件 
  4. * @return       x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置 
  5. */ 
  6. function getMousePoint(ev){ 
  7.     //定义鼠标在视窗中的位置 
  8.     var point={ 
  9.         x:0, 
  10.         y:0 
  11.     }; 
  12.     //如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 
  13.     if(typeof window.pageYOffset!='undefined'){ 
  14.         point.x=window.pageXOffset; 
  15.         point.y=window.pageYOffset; 
  16.     } 
  17.     //如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离 
  18.     //IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat 
  19.     else if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){ 
  20.         point.x=document.documentElement.scrollLeft; 
  21.         point.y=document.documentElement.scrollTop; 
  22.     } 
  23.     //如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度 
  24.     else if(typeof document.body!='undefined'){ 
  25.         point.x=document.body.scrollLeft; 
  26.         point.y=document.body.scrollTop; 
  27.     } 
  28.     //加上鼠标在视窗中的位置 
  29.     point.x+=ev.clientX; 
  30.     point.y+=ev.clientY; 
  31.     //返回鼠标在视窗中的位置 
  32.     return point; 

转载请注明:代码家园 » 兼容IE和firefox的javascript获取鼠标当前位置

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)