阻止子元素触发父元素事件,阻止冒泡

今天在弄一个显示隐藏二维码的部分

<div id="qCode" onclick="hideQCode()">
    <div id="qCode-container">
        ![](./image/qcode.png)
    </div>
</div>

在隐藏这个二维码的时候,点击图片也能触发隐藏事件,但是应该点击空白处隐藏,所以需要给子元素增加一个阻止事件冒泡的方法,上代码

function stopBubble(e){
    if (e && e.stopPropagation) {   // 非IE
        e.stopPropagation();
    }else{                          // IE
        window.event.cancelBubble = true;
    }
}
<div id="qCode" onclick="hideQCode()">
    <div id="qCode-container" onclick="stopBubble(this.id)">
        ![](./image/qcode.png)
    </div>
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天我做了一实验,想要实现当一个div嵌套另外一个div的时候,点击外层div的时候触发事件,而点击内层div的时...
    大春春阅读 20,299评论 7 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,028评论 25 709
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,559评论 0 0
  • “启示录”系列之#社区的制度# 这个问题的思考应该有数年,浑浑噩噩一阵子觉得自己想清楚了,某天又否定了自己。哈哈,...
    Julystory阅读 3,047评论 0 4
  • 题目来源将字符串中字符按频率排序。搞了半天,sort不会用,lambda表达式不会用… 又看了看别的大神们的做法,...
    我叫胆小我喜欢小心阅读 3,030评论 0 0