赞
踩
最近遇到这么一个问题:有一个父div,包含一个子div。要求单击父div时执行fun()函数,而单击子div时不执行fun()函数。
可以使用 @click.stop
阻止事件向父级元素传递
在Vue中,@click
是一个指令,用于监听元素的点击事件。@click.stop
是其中的一个修饰符,它的作用是阻止事件冒泡,即阻止事件向父级元素传递。
具体来说,当一个元素被点击时,它所处的DOM层级结构中的所有父级元素都会接收到该事件。如果在父级元素上也绑定了类似的@click
事件,那么这个事件也会被触发。而使用了@click.stop
修饰符的元素,当它被点击时,事件将不会再向父级元素传递。这可以避免事件被不必要地多次触发。
<template> <div @click="fun"> <div @click.stop> <!--子div--> </div> </div> </template> <script> export default { methods: { fun() { // 点击父div时执行的功能 console.log('单击了父div'); }, }, } </script>
<template> <div @click="doSomething"> <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button> </div> </template> <script> export default { methods: { doSomething() { console.log('doSomething') }, doSomethingElse() { console.log('doSomethingElse') } } } </script>
在上面的示例中,当点击按钮时,只会触发doSomethingElse方法,不会触发doSomething方法。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。