JavaScript鼠标事件
在JavaScript中，定义了9个鼠标相关的事件。如下表所示:
| 事件名称 | 触发条件 | 是否冒泡 |
|---|---|---|
| click | 单击主鼠标左键或者按下回车键触发 | 冒泡 |
| dblclick | 双击单击主鼠标左键触发 | 冒泡 |
| mousedown | 按下鼠标按钮触发 | 冒泡 |
| mouseup | 释放鼠标按钮触发 | 冒泡 |
| mouseenter | 元素获得光标时触发（子元素从父元素获得光标，子元素会触发并捕获该事件，光标由子元素移动到父元素不触发该事件) | 不冒泡 |
| mouseleave | 元素丢失光标时触发（父元素从子元素获得光标，子元素会触发并捕获该事件，光标由父元素移动到子元素不触发该事件) | 不冒泡 |
| mouseover | 元素获得光标时触发 | 冒泡 |
| mouseout | 元素丢失光标时触发 | 冒泡 |
| mousemove | 光标在元素上移动时触发 | 冒泡 |
鼠标事件属性
- 鼠标位置
可以通过鼠标事件相应的属性获取鼠标事件发生时的鼠标位置：
| 位置 | 对应属性 |
|---|---|
| 相对于浏览器视口的坐标 | 通过clientX和clientY相对于视口的横纵坐标 |
| 相对于网页页面的坐标 | 通过pageX和pageY相对于视口的横纵坐标 |
| 相对于设备屏幕的坐标 | 通过screenX和screenY相对于视口的横纵坐标 |
- 修改键
在鼠标执行动作时，相关的其它键盘按键可能会影响最终的鼠标事件的行为，Javascript为鼠标事件对象提供了检测如下键盘按键的属性:shiftKey、ctrlKey、altKey以及metaKey(windows home键)。这些属性为true，表示对应按键按下，否则为false.
| 属性 | 值 |
|---|---|
| shiftKey | true:按下，false：未按下 |
| ctrlKey | true:按下，false：未按下 |
| altKey | true:按下，false：未按下 |
| metaKey | true:按下，false：未按下 |
3.相关元素
在mouseout事件中，相关元素relatedTarget表示获得光标的元素引用;而在mouseover事件中,相关元素relatedTarget表示失去光标的元素引用。
JavaScript鼠标滚轮事件
鼠标滚轮事件在用鼠标滚轮向上或向下浏览页面时会触发，该事件冒泡，故可以window或者document对象上捕获该事件。该事件对象除具备鼠标事件所具有的属性之外（位置信息，修改键），还具有用于表示滚轮滚动方向的属性wheelDelta,以Microsoft Edge浏览器为例，向上浏览页面时，该属性为120,而向下浏览页面时，该属性为-120。
最后
以上就是成就大雁最近收集整理的关于JavaScript鼠标和鼠标滚轮事件JavaScript鼠标事件JavaScript鼠标滚轮事件的全部内容，更多相关JavaScript鼠标和鼠标滚轮事件JavaScript鼠标事件JavaScript鼠标滚轮事件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复