mouseenter与mouseover区别
- over属于滑过事件，从父元素进入到子元素，属于离开了父元素，会触发父元素的out，触发子元素的over
- enter 属于进入，从父元素进入子元素，并不算离开父元素，不会触发父元素的leave ,触发子元素的enter
- enter和leave阻止了事件的冒泡传播，而over和out还存在冒泡传播
所以对于子父元素嵌套这种情况，使用OVER会发生很多不愿意操作的事情，此时我们使用enter会更加简单，操作方便。
-
以下是over和out事例
<body> <style> #outer{ position: absolute; top: 30px; left: 30px; width: 200px; height: 200px; background:red; cursor: pointer; } #inner{ position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: #000000; cursor: pointer; } </style> <div id="outer"> <div id="inner"></div> </div> <script> inner.onmouseover=function(){ console.log('innerover'); } inner.onmouseout=function () { console.log('innerout'); } outer.onmouseover=function () { console.log('outerenter'); } outer.onmouseout=function () { console.log('outerout'); } </script> </body>-
当鼠标飘过页面控制台输出
1569485356409.png
以下是enter和leave事例
<body> <style> #outer{ position: absolute; top: 30px; left: 30px; width: 200px; height: 200px; background:red; cursor: pointer; } #inner{ position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: #000000; cursor: pointer; } </style> <div id="outer"> <div id="inner"></div> </div> <script> inner.onmouseenter=function(){ console.log('innerover'); } inner.onmouseleave=function () { console.log('innerout'); } outer.onmouseenter=function () { console.log('outerenter'); } outer.onmouseleave=function () { console.log('outerout'); } </script> </body>-
当鼠标经过一次控制台输出
-
1569485518315.png
-
网友评论