我要评论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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论