当前位置:   article > 正文

Vue:@click.stop -- 阻止事件向祖先元素传递(事件冒泡)

@click.stop

最近遇到这么一个问题:有一个父div,包含一个子div。要求单击父div时执行fun()函数,而单击子div时不执行fun()函数。

可以使用 @click.stop 阻止事件向父级元素传递

1 @click.stop介绍

Vue中,@click是一个指令,用于监听元素的点击事件。@click.stop是其中的一个修饰符,它的作用是阻止事件冒泡,即阻止事件向父级元素传递。

具体来说,当一个元素被点击时,它所处的DOM层级结构中的所有父级元素都会接收到该事件。如果在父级元素上也绑定了类似的@click事件,那么这个事件也会被触发。而使用了@click.stop修饰符的元素,当它被点击时,事件将不会再向父级元素传递。这可以避免事件被不必要地多次触发。

2 任何事件都不触发

<template>
  <div @click="fun">
    <div @click.stop>
      <!--子div-->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      // 点击父div时执行的功能
      console.log('单击了父div');
    },
  },
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3 不触发父级事件,触发属于自己的事件

<template>
  <div @click="doSomething">
    <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log('doSomething')
    },
    doSomethingElse() {
      console.log('doSomethingElse')
    }
  }
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在上面的示例中,当点击按钮时,只会触发doSomethingElse方法,不会触发doSomething方法。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/79396
推荐阅读
  

闽ICP备14008679号