鼠标事件

Yang2022年10月14日大约 3 分钟

事件顺序

mousedown → mouseup → click

鼠标按钮

与点击相关的事件始终具有 button 属性，该属性允许获取确切的鼠标按钮

鼠标按键状态	`event.button`	`event.which`（过时）
左键 (主要按键)	0	1
中键 (辅助按键)	1	2
右键 (次要按键)	2	3
X1 键 (后退按键)	3
X2 键 (前进按键)	4

组合键

描述

所有的鼠标事件都包含有关按下的组合键的信息

shiftKey：Shift
altKey：Alt（或对于 Mac 是 Opt）
ctrlKey：Ctrl
metaKey：对于 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

在鼠标指针进入/离开元素时触发
元素内部与后代之间的转换不会产生影响
不会冒泡