zoukankan      html  css  js  c++  java
  • mouseenter & mouseleave VS mouseover & mouseout

    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>

    参考文献:

    http://www.cnblogs.com/libmw/articles/2600747.html 

    本博客所有随笔,若未明确标示为转载或未带有原文链接,皆为原创。
    本博客所有随笔版权归博客园和kai.ma所有,欢迎转载,转载请保留:
    • 出处:http://kaima.cnblogs.com
    • 作者:kai.ma
  • 相关阅读:
    navicat设置唯一
    H5图片防盗链处理
    jar包更新
    微信小程序开发工具“当前系统代理不是安全代理”
    Set和Map
    OSS先后上传相同地址的图片
    js遍历删除数组中不符合条件的元素
    SSL配置
    关于socket.io获取客户端真实IP地址
    请在微信客户端打开链接 html
  • 原文地址:https://www.cnblogs.com/kaima/p/2702110.html
Copyright © 2011-2022 走看看