鼠标事件遇上“非冒泡”：让你的代码逻辑变得更顺滑

前言

前端开发工作中，鼠标事件的运用非常广泛。但是，在使用这些事件时，我们很容易遇到一些问题。比如说，某一个鼠标事件不支持冒泡，而我们在编程时需要利用冒泡来设计代码逻辑。那么，今天我们就要来聊一聊四个鼠标事件—— mouseover、click、mouseleave 和 mousemove，其中哪个不支持冒泡。

正文

在对这四个鼠标事件进行介绍之前，我们需要先了解一下什么是事件冒泡。

什么是事件冒泡

事件冒泡是指：当一个元素触发了一个事件，该事件会从其自身开始向外层元素“冒泡”，直至传递至页面最外层的元素。

举个例子：假设页面上有一个按钮，当我们点击这个按钮时，除了按钮本身的点击事件被触发外，其父元素或祖先元素也可能会因为事件冒泡而被触发相同的事件。

mouseover

mouseover 是鼠标移入元素时触发的事件，它会经过冒泡流程传递给所有的父元素和祖先元素。

比如说，有一个这样的 HTML 结构：

<div id="parent">
  <div id="child"></div>
</div>

当我们移入 #child 元素时，与 mouseover 事件相关联的事件处理器将在以下顺序中被调用：

1. #child
2. #parent

由此可见，在 mouseover 事件中，事件是可以冒泡的。

click

click 是最常用的鼠标事件之一。按下鼠标左键触发该事件，但是就像 @Fry 提到的那样，click 事件不支持事件冒泡。

也就是说，如果有多层包含关系的元素，并且我们在最里面的元素上绑定了 click 事件，那么该事件处理程序只会针对该元素而被触发，其父元素或祖先元素，都不会产生任何响应。

mouseleave

mouseleave 事件在鼠标移除元素时被触发。与 mouseover 不同的是，mouseleave 事件也是支持冒泡的。

例如：

<div id="parent">
  <div id="child"></div>
</div>

当我们从 #child 移出后，与 mouseleave 相关联的所有事件处理程序都将被调用：

1. #child
2. #parent

mousemove

mousemove 事件在鼠标移动到元素上时触发。这个事件也是支持冒泡的。

举个列子：

<div id="parent">
  <div id="child"></div>
</div>

当我们将鼠标移到 #child 上方时，与 mousemove 相关联的事件处理程序将以以下顺序调用：

1. #child
2. #parent
3. body
4. document

由此可见，在 mousemove 事件中，事件也是会冒泡的。

其它鼠标事件

那么，除了 mouseover、click、mouseleave 和 mousemove 之外，还有哪些鼠标事件支持事件冒泡呢？这里列出一些常用的鼠标事件：

• mousedown
• mouseup
• contextmenu
• dblclick

总结

综上所述，在四个常用的鼠标事件 mouseover、click、mouseleave 和 mousemove 中，只有 click 不支持事件冒泡。

在实际应用中，我们可以根据需要选择具体的鼠标事件。比如说，如果我们要实现一个下拉菜单，我们就可以使用 mouseover 来响应菜单项元素的移入事件；而如果我们需要记录用户点击行为，我们可以利用 click 事件来完成。当然，在使用这些事件时，我们还需要注意到浏览器的兼容性问题。

事件冒泡是前端开发中的重要概念之一，它能帮助我们更加灵活地设计代码逻辑。因此，对于不同的鼠标事件是否支持事件冒泡，我们也需要掌握清晰明了。