javascript获取鼠标位置

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30707875

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/peng14/p/3368020.html

本文详细解析了不同浏览器中事件位置属性的区别，如IE、Firefox和Chrome等，并介绍了DOM对象的高度属性，包括scrollHeight、scrollLeft等，帮助开发者更好地理解和使用这些属性。

首先不同浏览器中event位置属性的分析:

1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离) 3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离) 4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)

然后是DOM对象高度属性分析

1. scrollHeight: 获取对象的滚动高度 2. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 3. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 4. scrollWidth:获取对象的滚动宽度 5. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 6. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 7. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。

// 取X轴位

function mouseX(evt) {

// firefox

if (evt.pageX)

return evt.pageX;

// IE

else if (evt.clientX)

return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

else return null;

}

转载于:https://www.cnblogs.com/peng14/p/3368020.html