时间戳

首页 > 解决方案 > Vue stopPropagation 不起作用 - 孩子到父母

javascript - 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-eventspackage 用于检测 div 之外的点击。它工作正常。问题是，这段代码没有做任何事情：

        checkIfSaved : function (event, el)
        {
            event.stopPropagation();
            event.preventDefault();
        },

无论如何，点击都会传播到父级。如果我将事件@click发送给父级，则会触发所有点击。

停止传播是否仅在父母之间有效？

标签： javascriptvue.jsevent-handlingdom-eventsvue-events

解决方案

我不熟悉v-click-outside实现，但“点击外部”事件通常是通过在文档/正文元素上使用事件委托来实现的，因此到那时事件已经传播并且无法停止。

这是正在发生的事情的一个小例子：

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>

  1. 单击蓝色框。蓝色框首先收到点击事件，然后按预期冒泡到黄色框，然后是红色框。
  2. 点击黄色框。黄色然后红色的框接收点击事件，然后一旦它冒泡到文档元素（click-outside指令已将事件侦听器附加到该元素），click-outside则调用处理程序。此时调用stopPropagation()没有任何作用，因为事件已经冒泡到顶部。

我不相信.stop修饰符在您的示例中执行任何操作，因为v-click-outside不支持此修饰符（.stop仅支持v-on;v-click-outside需要支持它）。

因此，要解决您的问题，您需要更改事件的顺序：v-click-outside需要先处理 before @click。

您可以通过使用事件捕获更改v-click-outside实现来实现这一点，如下所示：

Vue.directive('click-outside', {
  bind(el, { value }) {
    el._handler = e => {
      if (!el.contains(e.target)) {
        value(e);
      }
    };
    
    // *** Using capturing ***
    document.addEventListener('click', el._handler, { capture: true });
  },
  
  unbind(el) {
    document.removeEventListener('click', el._handler, { capture: true });
  },
});

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-outside-events提交拉取请求以支持此功能？

推荐阅读