Vue中@click.stop与@click.prevent解读

更新时间：2025年02月05日 08:40:19 作者：AI研思录

Vue中,`@click.stop`用于阻止事件冒泡,而`@click.prevent`用于阻止事件的默认行为,这两个方法在处理事件时非常有用

Vue中@click.stop与@click.prevent

一、@click.stop

问题：

父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：

<view class="footer-box" @click="clickCard">
		<view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

此时，我们就需要使用@click.stop：阻止事件冒泡方法来解决这个问题：

<view class="footer-box" @click="clickCard">
		<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

二、@click.prevent

还有一个与之相似的方法：@click.prevent：阻止事件的默认行为，

例如：

在代码里写入一个a标签，点击会跳转到目标链接网页中：

<view class="example-body">
	<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow" >百度</a>
</view>

但如果我们不想让它跳转但还想使用a标签的话，此时就需要使用@click.prevent方法：

<view class="example-body">
	<a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent='notLink'>百度</a>
</view>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2单元测试环境搭建
本篇文章给大家分享了vue2单元测试环境搭建的详细步骤，对此有需要的朋友参考学习下。
2018-05-05
Vue路由的模块自动化与统一加载实现
这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue3中引用本地图片路径的方法详解
这篇文章主要为大家详细介绍了Vue3中引用本地图片路径的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
vue原理Compile从新建实例到结束流程源码
这篇文章主要为大家介绍了vue原理Compile从新建实例到结束流程源码，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
说说Vue.js中的functional函数化组件的使用
这篇文章主要介绍了说说Vue.js中的functional函数化组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
详解mpvue scroll-view自动回弹bug解决方案
设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方，非常具有实用价值，需要的朋友可以参考下
2018-10-10
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
详解Vue2.0里过滤器容易踩到的坑
本篇文章主要介绍了Vue2.0里过滤器容易踩到的坑，vue2.0需要自己定义过滤器。有兴趣的可以了解一下
2017-06-06
vue组件中的数据传递方法
这篇文章主要介绍了vue组件中的数据传递方法,非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-05-05
Vue 级联下拉框的设计与实现
在前端开发中，级联选择框是经常用到的，这样不仅可以增加用户输入的友好性，还能减少前后端交互的数据量。本文就介绍一下使用Vue实现级联下拉框，感兴趣的可以了解一下
2021-07-07