代码之家  ›  专栏  ›  技术社区  ›  eozzy

防止Vue中的事件冒泡

  •  59
  • eozzy  · 技术社区  · 7 年前
    <div id="largeArea" v-on:click="do_X">
        <button>Button</button>
    </div>
    

    所以我在Vue中遇到了这个问题,我不想在单击按钮时触发“do\u X”,尽管它是largeArea的一部分。

    5 回复  |  直到 3 年前
        1
  •  97
  •   omarjebari    6 年前

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

    <div id="app">
      <div id="largeArea" @click="do_X">
        <button @click.stop="do_Y">Button</button>
      </div>
    </div>
    
        2
  •  58
  •   Jacob van Lingen    5 年前

    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>
        3
  •  7
  •   Rameez Rami Jarek Tkaczyk    4 年前

    防止容器内所有咔哒声冒泡 <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
  •  2
  •   Ian    5 年前

    两个都没有提供答案。在我的情况下,它被包裹在 <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
  •  0
  •   Mayank Kumar Chaudhari    4 年前

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

    这可以通过使用事件修饰符来完成。Fore参考参见此 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;
        })
    }