大约 3 分钟
事件顺序
mousedown→mouseup→click
鼠标按钮
与点击相关的事件始终具有
button属性，该属性允许获取确切的鼠标按钮
| 鼠标按键状态 | event.button | event.which（过时） |
|---|---|---|
| 左键 (主要按键) | 0 | 1 |
| 中键 (辅助按键) | 1 | 2 |
| 右键 (次要按键) | 2 | 3 |
| X1 键 (后退按键) | 3 | |
| X2 键 (前进按键) | 4 |
组合键
描述
所有的鼠标事件都包含有关按下的组合键的信息
shiftKey：ShiftaltKey：Alt（或对于 Mac 是 Opt）ctrlKey：CtrlmetaKey：对于 Mac 是 Cmd
<!-- 仅在 Alt+Shift+click 时生效 -->
<button id="button">Alt + Shift + Click on me!</button>
<script>
button.onclick = function(event) {
if (event.altKey && event.shiftKey) {
console.log('Alt+Shift+click');
}
};
</script>
注意
在 MacOS 上左键单击和
Ctrl一起使用会被解释为 右键单击，并且会生成contextmenu事件，而不是像 Windows/Linux 中的click事件在 Mac 上我们通常使用
Cmd代替Ctrl
坐标
pageX/Y
相对于文档的坐标，以文档的左上角为参照物，并且同一位置的坐标不随页面的滚动而改变
clientX/Y
相对于窗口的坐标，以当前窗口的左上角为参照物，并且同一位置的坐标会随着页面的滚动而改变
小技巧
防止复制
<div oncopy="alert('禁止复制文本!');return false">Hello, world!</div>
网页禁止选中
<html onselectstart="return false"></html>
防止双击选中文本
<b ondblclick="alert('Click!')" onmousedown="return false">
Double-click me
</b>
取消原生拖拽
elem.ondragstart = function() {
return false;
};
获取被拖拽元素下方的元素
elem.hidden = true;
let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
elem.hidden = false;
指针事件
适用于触摸设备【相关说明】
事件类型
contextmenu
在鼠标右键被按下时触发
还有其他打开上下文菜单的方式，例如使用特殊的键盘按键，在这种情况下它也会被触发，因此它并不完全是鼠标事件
mousedown
在元素上按下鼠标按钮时触发
mouseup
在元素上松开鼠标按钮时触发
click
如果使用的是鼠标左键，则在同一个元素上的
mousedown及mouseup相继触发后，触发该事件。
dbclick
在短时间内双击同一元素后触发
mouseover
鼠标指针移入元素时触发
relatedTarget属性可以为null，意味着鼠标不是来自另一个元素，而是来自窗口之外
event.target：鼠标移入的元素event.relatedTarget：是鼠标来自的那个元素（relatedTarget→target）。
mouseout
鼠标指针移出元素时触发
relatedTarget属性可以为null，意味着鼠标不是来自另一个元素，而是来自窗口之外如果鼠标移动到另一个元素（甚至是一个后代元素），那么它将离开前一个元素（父元素）
event.target：鼠标离开的元素。event.relatedTarget：是鼠标移动到的，当前指针位置下的元素（target→relatedTarget）。
mousemove
在元素上移动鼠标时触发
如果访问者非常快地移动鼠标，某些 DOM 元素就可能被跳过
mouseenter/mouseleave
- 在鼠标指针进入/离开元素时触发
- 元素内部与后代之间的转换不会产生影响
- 不会冒泡