hongyangwu

主题

鼠标和滚轮事件 ​

鼠标事件 ​

事件说明
click用户单击鼠标主键，或按键盘回车键时触发
dblclick用户双击鼠标主键时触发
mousedown用户按下任意鼠标键时触发
mouseup用户释放鼠标键时触发
mouseenter用户把鼠标光标从元素外部移到元素内部时触发
事件不冒泡，不会在经过后代元素时触发
mouseleave用户把鼠标光标从元素内部移到元素外部时触发
事件不冒泡，不会在经过后代元素时触发
mousemove鼠标光标在元素上移动时反复触发
mouseout用户把鼠标光标从一个元素移动到另一个元素上时触发。移动到的元素可以是子元素
mouseover用户把鼠标光标从元素外部移动到元素内部时触发。
mousewheel用户滚动鼠标时触发

光标位置 ​

1. 客户端坐标：光标基于视口（可视区域，不算滚动条）的位置 ​
  • clientX 和 clientY
2. 页面坐标：光标基于页面（算上滚动条）的位置 ​
  • pageX 和 pageY
3. 屏幕坐标：光标基于整个屏幕的位置 ​
  • screenX 和 screenY

修饰键 ​

键盘上的修饰键 Shift、Ctrl、Alt、Meta 经常用于修改鼠标事件行为

可以获取以下几个修饰键状态，true 为按下，false 为没按下：

  • shiftKey、ctrlKey、altKey、metaKey

相关元素 ​

对于 mouseover 和 mouseout 事件来说，拥有相关元素

  • mouseover：相关元素是移进监听元素前的元素
  • mouseout：相关元素是移出监听元素后的元素

考虑到浏览器兼容下，下面是获取相关元素的封装函数

js
var EventUtil = {
    getRelatedTarget: function(event) {
        if (event.relatedTarget) {
            return event.relatedTarget
        } else if (event.toElement) {
            return event.toElement
        } else if (event.fromElement) {
            return event.fromElement
        } else {
			return null
        }
    }
}

如

html
<body>
	<div></div>
</body>
js
div.addEventListener('mouseover', event => console.log(EventUtil.getRelatedTarget(event)))
div.addEventListener('mouseout', event => console.log(EventUtil.getRelatedTarget(event)))

鼠标在 body 上，移进 div 时，打印 <body>

鼠标在 div 上，移出 div 时，打印 <body>

鼠标按键 ​

对于 mousedown 和 mouseup 事件，event 上有一个 button 属性，表示按下或释放的哪个按键

  • 0：鼠标主键（一般是左键）
  • 1：鼠标中键
  • 2：鼠标复键

滚动方向 ​

对于 mousewheel 事件，event 上有一个 wheelDelta 属性

  • +120：向前滚动一下
  • -120：向后滚动一下

对于大多数情况，只需知道滚动方向，则判断正负即可

Copyright © 2021-2024 hongyangwu