Vue stopPropagation不工作 - 孩子到父母
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue stopPropagation不工作 - 孩子到父母相关的知识，希望对你有一定的参考价值。
我正忙于事件传播。如果数据未保存，则任务是防止点击任何内容。所以，左边的div包含一个选项树。单击项目后，将显示右侧div中的设置。我想警告用户，当他试图在设置div外单击时，不保存数据。
代码如下所示：
<div class="row">
<div class="col-sm-6">
<tree
:data="treeData">
.. some tree data
</tree>
</div>
<div class="col-sm-6">
<div class="treeOptionEdit" v-if="showEditBox" v-click-outside.stop="checkIfSaved">
... setting input fields
vue-outside-events包用于检测div外的点击。它工作正常。问题是，这段代码没有做任何事情：
checkIfSaved : function (event, el)
{
event.stopPropagation();
event.preventDefault();
},
无论如何，点击都会传播到父级。如果我将一个事件@click放到父母身上，则会点击全部点击。
停止传播只能从父母到儿童吗？
答案
我不熟悉v-click-outside实现，但“click outside”事件通常是通过在document / body元素上使用事件委托来实现的，因此到那时事件已经传播并且无法停止。
以下是一个小例子：
Vue.directive('click-outside', {
bind(el, { value }) {
el._handler = e => {
if (!el.contains(e.target)) {
value(e);
}
};
document.addEventListener('click', el._handler);
},
unbind(el) {
document.removeEventListener('click', el._handler);
},
});
new Vue({
el: '#app',
methods: {
onClick(e, color) {
alert(`Clicked the ${color} box.`);
},
onClickOutside(e, color) {
e.stopPropagation();
alert(`Clicked outside of ${color} box.`);
},
},
});.box { padding: 20px; }
.red { background-color: red; }
.yellow { background-color: yellow; }
.blue { background-color: blue; }<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<div id="app">
<div class="box red" @click="onClick($event, 'red')">
<div class="box yellow" @click="onClick($event, 'yellow')">
<div class="box blue" @click="onClick($event, 'blue')" v-click-outside="e => onClickOutside(e, 'blue')">
</div>
</div>
</div>
</div>以上是关于Vue stopPropagation不工作 - 孩子到父母的主要内容，如果未能解决你的问题，请参考以下文章
如何覆盖 event.stopPropagation(),preventDefault().stopImmediatePropagation()
Javascript：如何启用 stopPropagation？