鼠标事件对象属性和方法详解

本文对浏览器中鼠标事件对象的属性和方法进行详细的说明,希望能够对有此需求的小伙伴提供方便和帮助。

1. isTrusted

Event接口的只读属性，用来判断事件是否是由用户行为触发的。

当事件由用户行为触发时，值为true。
当事件由脚本创建、修改或通过EventTarget.dispatchEvent()派发时，值为false。

javascript 复制代码

if (e.isTrusted) {
  /* Event 事件可信 */
} else {
  /* Event 事件不可信 */
}

2. altKey

表示鼠标事件发生时是否按下了alt键。

3. bubbles

返回一个布尔值，表示当前事件是否会向DOM树上层元素冒泡。

一些特定的事件类型会冒泡，此时事件对象的bubbles属性为true。
可以通过判断bubbles属性的值来确定一个事件对象是否冒泡。

4. button

表示鼠标事件中哪个按钮被按下。

0：未按下任何按钮。
1：按下左键。
2：按下右键。
3：同时按下左键和右键。
4：按下中键（滚轮）。
5：同时按下左键和中键（滚轮）。
6：同时按下右键和中键（滚轮）。
7：同时按下三个按钮。

5. buttons

表示鼠标按下的一个或多个按钮。

数字标识每个按钮：0-未按下、1-左键、2-右键、4-滚轮或中键、8-第四个按钮（通常是"浏览器后退"）、16-第五个按钮（通常是"浏览器前进"）。
如果同时按下多个按钮，则buttons的值是所有按钮标识值进行按位或（|）运算的结果。

6. cancelBubble

阻止事件冒泡的属性，在IE的事件机制中使用。

javascript 复制代码

event.cancelBubble = true;

7. clientX / clientY

MouseEvent.clientX和MouseEvent.clientY表示事件在客户端区域的水平和垂直坐标。

不受页面水平和垂直滚动影响。
点击客户端区域左上角时，clientX和clientY的值都为0。

8. composed

如果返回的布尔值为true，表示事件可以从shadow DOM传递到一般的DOM。

前提是事件具有可传播性，即事件的bubbles属性必须为true。
可以通过调用composedPath()方法查看事件从shadow DOM传递到普通DOM的路径。
如果属性值为false，则事件不会跨越shadow DOM的边界传播。

9. ctrlKey

表示鼠标事件发生时是否按下了ctrl键。

10. currentTarget

Event接口的只读属性，表示事件当前所在的目标对象。

它始终指向事件绑定的元素。
与Event.target不同，Event.target表示事件触发的元素。

11. defaultPrevented

返回一个布尔值，表示当前事件是否调用了event.preventDefault()方法。

javascript 复制代码

if (e.defaultPrevented) {
  /* 事件的默认动作已被取消 */
}

12. detail

UIEvent.detail是只读属性，提供了与点击事件相关的当前点击数。

对于click或dblclick事件，detail表示当前点击的数量。
对于mousedown或mouseup事件，detail为1加上当前点击数。
对于其他UIEvent对象，detail始终为0。

13. eventPhase

表示事件流当前处于的阶段。

Event.NONE：当前没有事件被处理。
Event.CAPTURING_PHASE：事件被目标元素的祖先对象处理，从Window开始，然后是Document，然后是父元素，直到目标元素的父元素。
Event.AT_TARGET：事件已经到达事件目标。对于AT_TARGET阶段注册的事件监听器将被调用。
Event.BUBBLING_PHASE：事件沿着DOM树逆向向上冒泡，从父元素开始，最终到达包含元素的Window。

14. fromElement

在IE中，用于mouseover事件，表示鼠标从哪个元素移入。在IE中，用于mouseout事件，表示鼠标移出的元素。

15. layerX / layerY

MouseEvent.layerX是MouseEvent.clientX的别名，返回鼠标相对于当前层的水平坐标。 MouseEvent.layerY是MouseEvent.clientY的别名，返回鼠标相对于当前层的垂直坐标。

16. metaKey

MouseEvent.metaKey是一个布尔值，表示是否按下了meta键。

17. movementX / movementY

MouseEvent.movementX和MouseEvent.movementY表示鼠标指针在当前事件和上一个mousemove事件之间的水平和垂直移动距离。

18. offsetX / offsetY

MouseEvent.offsetX和MouseEvent.offsetY表示鼠标相对于目标节点内部填充区域的偏移量。

19. pageX / pageY

MouseEvent.pageX和MouseEvent.pageY表示鼠标点击时相对于整个文档左上角的水平和垂直坐标，包括页面不可见的部分。

20. path

事件冒泡路径上的所有对象组成的一个数组。

21. relatedTarget

MouseEvent.relatedTarget是鼠标事件的辅助目标（如果有的话）。

对于mouseenter和mouseover事件，表示鼠标进入的目标元素和离开的目标元素。
对于mouseleave和mouseout事件，表示鼠标离开的目标元素和进入的目标元素。
对于dragenter和dragleave事件，表示鼠标进入的目标元素和离开的目标元素。
对于其他事件，相关目标为null或未定义。

22. returnValue

Event.returnValue属性表示该事件的默认操作是否已被阻止。

默认情况下，该属性的值为true，即允许进行默认操作。
将该属性设置为false以阻止默认操作。

23. screenX / screenY

MouseEvent.screenX和MouseEvent.screenY表示鼠标指针在屏幕坐标中的水平和垂直位置。

24. shiftKey

表示鼠标事件发生时是否按下了shift键。

25. srcElement

Event.srcElement是标准的Event.target属性的别名，只对旧版本的IE浏览器有效。

26. target

触发事件的对象（DOM元素）的引用。

当事件的处理程序在事件的冒泡或捕获阶段被调用时，target与currentTarget不同。
target表示事件触发的元素。

27. timestamp

返回事件发生时的时间戳。

28. toElement

相对于fromElement而言，在IE中使用。

29. type

只读属性Event.type返回表示事件对象的事件类型的字符串。传递给EventTarget.addEventListener()和EventTarget.removeEventListener()方法的event参数的值是不区分大小写的。

30. view

view事件属性返回对发生事件的Window对象的引用。

31. which

event.which规范化了按钮按下（mousedown和mouseup事件）的返回值。

左键返回1，中键返回2，右键返回3。
使用event.which代替event.button。

32. x / y

MouseEvent.x是MouseEvent.clientX的别名，返回鼠标相对于当前屏幕区域的水平坐标。 MouseEvent.y是MouseEvent.clientY的别名，返回鼠标相对于当前屏幕区域的垂直坐标。