学科分类
目录
JavaScript网页编程

鼠标事件对象

之前我们学习了event事件对象,它代表事件的状态,是跟事件相关的一系列信息的集合,现阶段主要使用的是鼠标事件对象MouseEvent。

在项目开发中还经常涉及一些常用的鼠标属性,用来获取当前鼠标的位置信息。常用的属性如表1所示。

表1 鼠标事件位置属性

位置属性(只读) 描述
clientX 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标)
clientY 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标)
pageX 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容
pageY 鼠标指针位于文档的垂直坐标(Y轴坐标),IE 6~IE 8不兼容
screenX 鼠标指针位于屏幕的水平坐标(X轴坐标)
screenY 鼠标指针位于屏幕的垂直坐标(Y轴坐标)

从表1可知,IE 6~IE 8浏览器中不兼容pageX和pageY属性。因此,项目开发时需要对IE 6~IE 8浏览器进行兼容处理,具体示例如下。

var pageX = event.pageX || event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

var pageY = event.pageY || event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

从以上代码可知,鼠标指针在文档中的坐标等于鼠标在当前窗口中的坐标加上滚动条卷去的文本长度,需要用到document.body或者document.documentElement下的scrollLeft和scrollTop属性。

点击此处
隐藏目录