mouseenter & mouseleave VS mouseover & mouseout

最新推荐文章于 2024-07-26 10:19:04 发布

weixin_33974433

最新推荐文章于 2024-07-26 10:19:04 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/382949

本文通过实例对比了mouseenter/mouseleave与mouseover/mouseout两种鼠标事件的区别，重点在于前者不会发生事件冒泡，且当指针从元素后代的空间移至该元素自身空间时不会触发。测试环境为Firefox+Firebug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mouseenter/mouseleave 和 mouseover/mouseout的本质区别网上讲得比较多，但各种解释看得云里雾里，经过试验，他们的区别 it differs in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space 引自mozilla.org

上面这句英文用不同的颜色区分以断句，方便理解。本质还是体现在冒泡上。

可以通过下面两个例子加深印象，测试环境Firefox+Firebug。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>mouseenter & mouseleave</title>
  <style>
    div{position:absolute;}
  </style>
 </head>
 <body>
    <div id="div1" style="height:100px;border:1px solid red" onmouseenter="console.log('enter div1');" onmouseleave="console.log('leave div1');">
         div1 div1 div1 div1 div1 div1 div1 div1
        <div id="div2" style="left:50px;height:200px;border:1px solid red" onmouseenter="console.log('enter div2');" onmouseleave="console.log('leave div2');">
            div2 div2 div2 div2 div2 div2 div2 
            <div id="div3" style="left:100px;height:300px;border:1px solid red" onmouseenter="console.log('enter div3');" onmouseleave="console.log('leave div3');">
                 div3 div3 div3 div3 div3 div3 div3 div3
            </div>
        </div>
    </div>
 </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>mouseover & mouseout</title>
  <style>
    div{position:absolute;}
  </style>
 </head>
 <body>
    <div id="div1" style="height:100px;border:1px solid red" onmouseover="console.log('over div1');" onmouseout="console.log('out div1');">
         div1 div1 div1 div1 div1 div1 div1 div1
        <div id="div2" style="left:50px;height:200px;border:1px solid red" onmouseover="console.log('over div2');" onmouseout="console.log('out div2');">
            div2 div2 div2 div2 div2 div2 div2 
            <div id="div3" style="left:100px;height:300px;border:1px solid red" onmouseover="console.log('over div3');" onmouseout="console.log('out div3');">
                 div3 div3 div3 div3 div3 div3 div3 div3
            </div>
        </div>
    </div>
 </body>
</html>