美文网首页
mouseover,mouseenter和mouseout,mo

mouseover,mouseenter和mouseout,mo

作者: AugustEchoStone | 来源:发表于2017-04-07 13:53 被阅读0次

    这里贴原生代码,jquery里面也是这样

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        *{
          padding: 0;
          margin: 0;
        }
        #box1{
          width: 200px;
          height: 200px;
          background-color: #2aabd2;
          font: bold 28px 微软雅黑;
          color: #fff;
          margin: 50px auto;
          
        }
        #box2{
          width: 100px;
          height: 100px;
          background-color: lightcoral;
          
        }
        #box3{
          width: 200px;
          height: 200px;
          background-color: #2aabd2;
          font: bold 28px 微软雅黑;
          color: #fff;
          margin: 50px auto;
    
        }
        #box4{
          width: 100px;
          height: 100px;
          background-color: lightcoral;
    
        }
      </style>
    </head>
    <body>
    <div id="box1">
      <div id="box2">BOX2</div>
      BOX1
    </div>
    <div id="box3">
      <div id="box4">BOX4</div>
      BOX3
    </div>
    <script type="text/javascript">
        window.onload = function () {
          var box1 = document.getElementById('box1')
          var box2 = document.getElementById('box2')
          var box3 = document.getElementById('box3')
          var box4 = document.getElementById('box4')
          var i = 0, j = 0
          box1.onmouseover = function () {
            i++
            console.log('onmouseover触发了' + i)
          }
          box1.onmouseleave = function () {
            i-=2
            console.log('onmouseleave触发了' + i)
          }
          box3.onmouseenter = function () {
            j++
            console.log('onmouseenter触发了' + j)
          }
          box3.onmouseout = function () {
            j-=2
            console.log('onmouseout触发了' + j)
          }
        }
    </script>
    </body>
    </html>
    

    都以这个图为标准说明



    mouseover和mouseenter
    方式 mouseover mouseenter
    从外界直接进入box1 触发 触发
    从外界直接进入box2 触发 触发
    从box1进入box2 触发 不触发
    从box2进入box1 触发 不 触发

    得出结论 : mouseover冒泡,mouseenter不冒泡


    mouseout和mouseleave
    方式 mouseout mouseleave
    从box1出到外界 触发 触发
    从box2出到外界 触发 触发
    从box1出到box2 触发 不触发
    从box2出到box1 触发 不 触发

    得出结论 : mouseout冒泡,mouseleave不冒泡


    总结 : 所有的鼠标事件中,只有mouseenter和mouseleave不冒泡,其他鼠标事件都是冒泡的,在使用这几种事件的时候,可以根据自己的需求进行选择

    相关文章

      网友评论

          本文标题:mouseover,mouseenter和mouseout,mo

          本文链接:https://www.haomeiwen.com/subject/fykhattx.html