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

阅读本书更多章节>>>>

在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>

总结：在vue项目开发中，vue为我们提供了很多实用的方法，做项目时一定要冷静下来，多思考。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-01/152096.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！