vue函数@click.prevent的使用解析
作者:大雷!
这篇文章主要介绍了vue函数@click.prevent的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
@click.prevent的使用
背景 :vue项目操作中遇到@click.prevent函数,场景特殊(项目中有一个自己封装的组件库,因此所有的样式都统一集成,遇到特殊情况想引入特殊UI风格处理时,部分组件需要样式重调,因此用到@click.prevent)特此纪要。
@click.prevent的作用是什么?
说明:@click.prevent属于vue的内置函数,vue中有很多其他的函数也有很丰富的应用场景,此篇博文思虑再三,仅对@click.prevent进行阐述,有关其他的函数了解,可自行查阅相关资料。
解决方案:@click.prevent函数会阻止触发dom的原始事件,而去执行特定的事件。
为了更好的理解@click.prevent函数,引入一个项目中的使用样例以供参考:
<!-- 样例 --> // Codding... <a class="img-control" v-show="true" @click.prevent="goXxxx()">修改</a> <!-- 解析: a标签默认有自己的href属性,触发a标签后他会自动跳转对应的链接地址或执行的函数。 此处为了嵌套,避免调整样式所以引用了a标签来处理,但又为了避免a标签的属性限制,因此引用了@click.prevent函数阻隔默认的操作。 (此处还想做一些延伸说明,但目前没有太多的案例来很好的说明,后续再做更新,目前只到这里) -->
vue还有几个常用的函数,如:@keyup.enter(enter回车事件)等等。
@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>
这时再点击a标签的时候就不会跳转目标地址链接了。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。