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

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

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

解决方法:使用vue中的事件修饰符

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

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

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

转载请说明出处内容投诉
CSS教程_站长资源网 » vue子元素点击事件与父元素点击事件冲突 子元素点击事件不触发

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买