冒泡事件

1.子div点击触发自己的事件，不触发父div的事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
      .div1{
          width: 300px;
          height: 300px;
          background: red;
      }
      .div2{
          width: 100px;
          height: 100px;
          background: rosybrown;
      }
  </style>
  <body>
    <div onclick="aaa()" class="div1">
      <div onclick="bbb()" class="div2"></div>
    </div>
    <script>
        function aaa(){
            console.log(1)
        }
        function bbb(){
            console.log(2)
            event.stopPropagation(); //重点
        }
    </script>
  </body>
</html>

2.子div不挡住父div的事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
      .div1{
          width: 300px;
          height: 300px;
          background: red;
      }
      .div2{
          width: 100px;
          height: 100px;
          background: rosybrown;
          pointer-events: none; //重点
      }
  </style>
  <body>
    <div onclick="aaa()" class="div1">
      <div class="div2"></div>
    </div>
    <script>
        function aaa(){
            console.log(1)
        }
        function bbb(){
            console.log(2)
            // event.stopPropagation();
        }
    </script>
  </body>
</html>

 

posted @ 2021-09-07 17:36  青眼魔术  阅读(56)  评论(0)    收藏  举报