防止 Vue 中的事件冒泡

Posted 2023-05-07

【中文标题】防止 Vue 中的事件冒泡

【英文标题】：Prevent event bubbling in Vue

【发布时间】：2018-07-25 16:15:09

【问题描述】：

<div id="largeArea" v-on:click="do_X">
    <button>Button</button>
</div>

所以我在 Vue 中遇到了这个问题，我不希望在单击按钮时触发“do_X”，尽管它是 largeArea 的一部分。

【参考方案1】：

我发现在子元素上使用“停止”事件修饰符对我有用。 例如

<div id="app">
  <div id="largeArea" @click="do_X">
    <button @click.stop="do_Y">Button</button>
  </div>
</div>

【讨论】：

这是一个更好的答案，因为在我的情况下，我需要能够单击较大 div 上的任意位置以执行特定操作，并单击小元素以执行另一个操作。就我而言，“v-on:click.stop="doSomeAction()" 有效。

@Meanman 用于隔离事件源的子级stop 和父级self 之间几乎没有区别。但是，前者具有阻止事件到达文档中较低级别的副作用。例如，如果您使用stop，则无法跟踪对document 或body 的所有点击

太好了，这甚至可以使用嵌套的 <a> 并且没有事件处理程序：<a :href="data.link" target="_blank" @click.stop>

【参考方案2】：

从documentation 开始，使用self 事件修饰符仅捕获源自元素本身的事件。

<div id="largeArea" v-on:click.self="do_X">

new Vue(
  el: '#app',
  methods: 
    do_X () 
      console.log(Date.now(), 'do_X')
    
  
)

#largeArea 
  padding: 20px;
  border: 1px solid black;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <div id="largeArea" @click.self="do_X">
    <button>Button</button>
  </div>
</div>

【讨论】：

是否有我可以添加到子元素的事件装饰器。因为我确实希望除了这个另一个按钮之外的每个子元素都有事件冒泡。 更新：我使用@click.prevent.stop 来达到预期的效果！

【参考方案3】：

防止容器内的所有点击冒泡<div>

<div @click.stop="" class="action">

  <button @click="someClickAction1()">Action 1</button>

  <button @click="someClickAction2()">Action 2</button>

<div>

防止现有点击操作冒泡

<button @click.stop="someClickAction()">Single Action</button>

【参考方案4】：

没有提供的答案。在我的情况下，它被包裹在 <router-link> 而不是 <div>。

我在子元素上调用了e.preventDefault()，它起作用了

<router-link>
    <div @click="do_X"></div>
</router-link>

new Vue(
  el: '#app',
  methods: 
    do_X (e) 
    e.preventDefault();
      console.log(Date.now(), 'do_X')
    
  
)

【参考方案5】：

我正在创建一个导航栏并且有类似的要求。我希望在接受菜单或其子项的任何位置单击时关闭弹出菜单。

这可以通过使用事件修饰符来完成。前参考见docs

具体来说，我们可以使用stop事件修饰符。

<div id="largeArea" v-on:click="do_X()">
    <button @click.stop="">Button</button>
</div>

.stop 将停止事件传播。

---

就我而言，更好的解决方案是使用e.target != this.$el

mounted() 
    window.addEventListener('click', (e)=>
        if(e.target !== this.$el)
            this.showChild = false;
    )