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


在实现页面过程中,我们通常会遇见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>

.

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM