文章目录

1. 鼠标事件类型1.1 简单事件1.2 复杂事件 2. 鼠标事件的触发顺序3. 小Tips3.1 平时使用小技巧3.2 开发时的小技巧 鼠标是我们日常生活中经常使用的，这里我们来简单了解下JS中的鼠标事件以及使用的一些小技巧。

1. 鼠标事件类型

我们将鼠标事件分为两类：简单事件和复杂事件

1.1 简单事件

mousedown/mouseup： 鼠标按钮在一个元素上点击/释放时触发。mouseover/mouseout： 鼠标指针进入/离开一个元素时触发（鼠标快速移动的话可能会跳过中间元素）。mouseenter/mouseleave： 鼠标指针进入/离开一个元素时触发（和mouseover/mouseout的不同点在于：①元素内部进入或离开子代时的转换不会触发。②mouseenter/mouseleave事件不冒泡）。mousemove：鼠标在一个元素上移动时触发。

1.2 复杂事件

click（鼠标点击事件，“点击”指的是用鼠标左键）：鼠标左键在同一个元素上按下并释放开后触发。contextmenu（右键菜单事件）：鼠标右键单击后时触发。dbclick（双击事件）：在一个元素上快速点击2次（1秒内）时触发。

2. 鼠标事件的触发顺序

简单事件的触发顺序没什么好说的，我们来看看复杂事件的触发顺序：

从①中可以看到鼠标点击时的触发事件过程： mousedown -> mouseup -> click， which属性值为1（这个后面讨论）。从②中可以看到右键菜单事件的触发过程： mousedown -> mouseup -> contextmenu，which属性值为3。从③中可以看到双击事件的触发过程： mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dbclick， which属性值为1。④是使用鼠标滚轮点击时（是的，鼠标滚轮也是也可以点击的！）的触发过程： mousedown -> mouseup，which属性值为2。

这上面，which我们猜猜也能知道代表着啥，即值1、2、3分别代表鼠标左键、中键（滚轮）、右键。

3. 小Tips

3.1 平时使用小技巧

平时我们想在新的标签页中打开一个链接，可能使用的方式是：鼠标右键唤起菜单栏 -> 选择“在新的标签页中打开链接”。实际上有更简便的方式：鼠标中键（滚轮）点击链接就可以在新的标签页中打开该链接了（我经常用“在新的标签页中打开”这个功能，然鹅之前居然不知道还可以用鼠标滚轮点击就可以的，孤陋寡闻了。。。）当页面有垂直滚动条时，在页面空白处按下鼠标中键，然后移动鼠标，向上移动时可以让页面自动向上滚动，反之可以上页面自动向下滚动。向上/下移动的距离越大，自动滚动的速度越快。从第2节中我们知道，触发一个点击事件，一共是需要经历：在同一个元素上，鼠标按下—>鼠标松开这一完整过程才能正常触发点击事件。也就是只要这过程不完整的话就不会触发点击事件，利用这点，我们平时在按下提交表单按钮的时候，突然又后悔了（比如要剁手一件宝贝），这时我们保持鼠标按键按下的状态，然后将鼠标移开“提交”这个按钮，再松开鼠标，这样我们就破坏了点击的流程（没在同一个元素上触发：mousedown（元素内）、mouseup（元素外）事件），点击事件也就不会触发了。

3.2 开发时的小技巧

所有鼠标事件都包含关于按下修饰符键（比如Ctrl键 + 鼠标左键同时点击等）的信息，如下为一些修饰符键： 事件属性(event对象上)对应的修饰符键shiftKeyShift 键altKeyAlt键 (或者 Mac 上的 Opt 键)ctrlKeyCtrl 键metaKeyMac 的 Cmd 键

在Mac上通常是用Cmd替换Ctrl，对于不同的操作系统，我们可以在JS代码中通过if (event.ctrlKey || event.metaKey)判断来让所有用户都有一致性的体验。 2. 很多用户都有在新的标签页中打开链接的习惯，我们可以将<a>标签的样式设置成<button>的样子，这样用户就可以在对应的地方使用在新的标签页中打开链接的功能，原生的<button>标签是没有该功能的。

例子：

<ul id="menu" class="menu"> <li><a href="/html">HTML</a></li> <li><a href="/javascript">JavaScript</a></li> <li><a href="/css">CSS</a></li> </ul>

对应的样式：

.menu li { display: inline-block; margin: 0; } .menu > li a { display: inline-block; margin: 0 2px; outline: none; text-align: center; text-decoration: none; font: 14px/100% sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); border-radius: .5em; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; } .menu > li:hover a { text-decoration: none; background: #007ead; }

效果：

参考:

https://javascript.info/default-browser-actionhttps://javascript.info/mouse-events-basics#complex-events