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

作者: 咸鱼菠菜 | 来源:发表于2017-01-07 19:27 被阅读0次

Vue知识点笔记2
stopPropagation和stopImmediatePro
js事件监听事件冒泡和css3新增
Jqeury 阻止事件冒泡
阻止子元素触发父元素事件，阻止冒泡
uni-app 事件修饰符
事件其他
vue中的事件修饰符
v-on修饰符
阻止事件冒泡

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

<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>

Vue知识点笔记2
Vue指令之事件修饰符：.stop 阻止冒泡（写在子元素中阻止其触发父元素事件）.prevent 阻止默认事件.c...
stopPropagation和stopImmediatePro
都可以阻止事件冒泡（子元素向父元素冒泡） stopImmediatePropagation阻止事件冒泡并且阻止相同...
js事件监听事件冒泡和css3新增
事件监听：事件捕获目标阶段冒泡阶段事件冒泡：当使用事件冒泡时，子元素先触发，父级元素后触发。 //阻止事件冒...
Jqeury 阻止事件冒泡
Jqeury 阻止事件冒泡在子元素和父元素上同时绑定相同的事件，在触发子元素事件的同时，事件会冒泡继续往上会触发...
阻止子元素触发父元素事件，阻止冒泡
今天在弄一个显示隐藏二维码的部分在隐藏这个二维码的时候，点击图片也能触发隐藏事件，但是应该点击空白处隐藏，所以需...
uni-app 事件修饰符
事件修饰符修饰符说明stop 阻止事件冒泡阻止子元素的事件触发时同时触发其祖宗元素的事件capture 阻止事件...
事件其他
1. 阻止事件冒泡默认情况下，触发子元素的事件时，会同时触发父元素相同的事件，这就叫做事件冒泡 e.stopPr...
vue中的事件修饰符
不使用修饰符情况执行结果：点击了子元素；点击了父元素 stop - 阻止事件冒泡执行结果：点击了子元素（未触发...
v-on修饰符
1.阻止冒泡事件 .stop 事件冒泡：在结构上存在嵌套的元素，有事件冒泡的功能，自子元素传递（冒泡）到父元素，所...
阻止事件冒泡
在父元素及子元素度需要绑定事件的情况下，子元素在事件后加上.stop可以阻止事件冒泡