冒泡事件处理cancelBubble

7910EFB9-1CDF-44C8-981A-1F78DAAE4F3F.png
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


  <script type="text/javascript">

    window.onload = function () {

      var one = document.getElementById("one")
      var two = document.getElementById("two")
      var three = document.getElementById("three")

      one.onclick = function () {

        alert(1)

      }

      two.onclick = function () {

        alert(2)

      }

      three.onclick = function (ev) {

        let tempevent = ev || event
        
        alert(3)
        //阻止事件传递
        tempevent.cancelBubble = true

      }

    }


  </script>


</head>
<body>

<div id="one" style="width: 200px; height: 200px; background-color: #4eeda8">
  <div id="two" style="width: 100px; height: 100px; background-color: #6051ed">
    <div id="three" style="width: 50px; height: 50px; background-color: #ed6249">


    </div>

  </div>


</div>


</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容