当前位置: 首页 > 网络编程 > JavaScript

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

时间:2025-03-19 10:40:13 JavaScript 我要投稿
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>

总结

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