vue子元素点击事件与父元素点击事件冲突子元素点击事件不触发_vue点击子元素不触发父元素

作者：小蓝xlanll | 2024-02-13 02:29:56

踩

vue点击子元素不触发父元素

在vue项目中，子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？

vue为 v-on 提供了 .stop、.prevent、.self、.once等事件修饰符，当遇到子元素与父元素的事件冲突，就要阻止事件传递的产生， .stop 的作用是阻止事件继续传播，所以我们在子元素的事件上添加事件修实符 .stop 来阻止事件传播就能够解决子元素点击事件不触发的问题。


<div class="face-header" v-on:click="handleChange">
    <div class="title" v-on:click.stop="openDetail">
        订单版本：v1.0.0
    </div>
</div>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/79427

vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发_vue点击子元素不触发父元素