关于mouseenter和mouseout的区别

来源：2-5 鼠标事件-mouseenter、mouseleave

夜魇丶

2019-11-26 16:16:40

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       .one{
           width: 200px;
           height: 200px;
           background-color: red;
       }
       .two{
           width: 100px;
           height: 100px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="one">
       <div class="two"></div>
   </div>
</body>
   <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
   <script>
       $('.two').mouseenter(function(){
           console.log('two enter');
       })
       $('.two').mouseleave(function(){
           console.log('two leave');
       })
       $('.one').mouseenter(function(){
           console.log('one enter');
       })
       $('.one').mouseleave(function(){
           console.log('one leave');
       })

   </script>
</html>

div.one为红色方块，div.two为蓝色子方块

我的鼠标从空白处直接移入蓝色方块里（不经过红色方块），然后打印结果如图上所示。

我查了一下mouseenter事件不会冒泡，只有在鼠标放在目标元素上才会触发。

但是我把鼠标放在蓝色子方块的时候，也触发了红色方块的移入事件。

难道mouseenter的不冒泡指的不是这个。

我把鼠标从蓝色方块移到红色方块。

mouseenter:

mouseenter的情况下，红色方块还在移入的状态里，没有触发one leave。

mouseover：

从移入蓝方块，触发了红方块上的mouseover事件，从蓝方块移到红方块上，又触发了一遍mouseover事件。原因是什么…蓝方块在红方块里面，从头到尾都没有离开过红方块，为什么会触发两遍mouseover事件。是因为冒泡的关系么。那要怎么理解这个冒泡。

以及怎么理解mouseenter和mouseover的区别。

还有mouseleave和mouseout的区别。

我试了一下打印的乱七八糟的…跟我想象中差好多，我该怎么理解这个冒泡机制。

另外在写代码的时候哪个事件更常用，更建议使用？

还有mouseleave和mouseout

写回答

1回答

好帮手慕夭夭

2019-11-26

已采纳

同学你好，你可以这样理解，如下

1.mouseenter:

当你直接移入子元素的时候，因为子元素是包含在父元素中，所以移入子元素时，它肯定也移入了父元素。即移入的那一刻，同时触发了移入子元素和移入父元素的事件，这个事件不是冒泡产生的。

如果测试冒泡，需要如下操作：

第一次移入父元素，触发父元素的事件。第二次移入子元素，因为第一次已经移入了父元素，所以移入子元素的时候就不会再触发父元素的事件。

2. 当触发子元素的某一个事件，会向外一层层冒泡，如果发现父元素也绑定了相同的事件，那么父元素的这个事件也会触发，这就是冒泡。例如子元素与父元素都绑定了mouseout事件，鼠标移开子元素，就会冒泡，查找父元素也绑定了mouseout，父元素mouseout事件就会触发。所以冒泡产生的效果，即使没有离开父元素，也会触发父元素的移开事件。

mouseover和mouseout冒泡，当移入父元素，触发子元素的移出事件，冒泡触发父元素的移出事件，但此时并没有移出父元素，所以立马执行父元素的移入事件。