JavaScript获取浏览器中的鼠标位置

使用JS创建提示框、拖拽等应用的时候,往往需要得知浏览器中鼠标的位置。鼠标在浏览器中的位置可以分为两种:一种是鼠标在窗口中的位置,另外一种是鼠标在文档中的位置。这里是示例

当鼠标在当前窗口移动的时候(mousemove),默认会触发document对象的mousemove事件。通过捕获该事件的event.clientX, event.clientY属性可以得到鼠标在当前窗口中的位置,即便当前文档出现了滚动条,左上角的坐标仍为(0,0)。此时鼠标在文档中的位置等于鼠标在当前窗口中的位置。即event.clientX。

出现滚动条的时候,通过document的mousemove事件提供的event.clientX,event.clientY信息并不能正确地去定位元素,此时必须要考虑到滚动条的位置。这时应该是滚动条的偏移位置加上鼠标在当前窗口的位置才能得到鼠标在文档中的位置。

/**
 * 捕获鼠标在HTML文档中的位置
 * @param event 事件对象(W3C的event或IE的window.event)
 * @return {x: , y: } 鼠标在文档中的坐标
 */
	var getMouseCoord = function(event) {
	  if (window.pageYOffset) { //支持pageYOffset属性的浏览器
		return {
		  x: event.clientX + window.pageXOffset,
		  y: event.clientY + window.pageYOffset
		}	  
	  } else if (document.documentElement) { // IE浏览器
		return {
		  x: event.clientX + document.documentElement.scrollLeft,
		  y: event.clientY + document.documentElement.scrollTop
		}	  

	  } else if (document.body) { // 其它的浏览器
	    return {
		  x: event.clientX + document.body.scrollLeft,
		  y: event.clientY + document.body.scrollTop
		}
	  }
	}

为了使浏览器正确地选择合适的方式去获得某个需要的值,一般最先检测使用浏览器私有的方式。最后才使用所有浏览器都支持的方式,方便平稳退化。

现在还没有评论

留下您的大名