禁止事件穿透 / 阻止事件冒泡

在实现页面过程中，我们通常会遇见onclick事件的嵌套问题，当点击内层标签的onclick事件时，还会触发外层标签的onclick事件，我们要实现的就是阻止外层onclick事件的触发。

代码如下：

html代码：

<body>
  <!--
    描述：阻止事件冒泡
  -->
  <div οnclick="show1()">而微软推欧元价格突然发
    <p οnclick="show2()">围绕太阳接近银行股份的法国红酒魔鬼屠夫</p>
  </div>
</body>

js代码：

<script>
  function show1() {
    alert('show1');
  }

  function show2() {
    alert('show2');
    cancelBubble();
  }

  function cancelBubble(e) {
    var evt = e ? e : window.event;
    if(evt.stopPropagation) { //W3C 
      evt.stopPropagation();
    } else { //IE      
      evt.cancelBubble = true;
    }
  }
</script>

.

 

posted @ 2020-02-06 21:00  每天都要进步一点点  阅读(1655)  评论(0)  编辑  收藏  举报