vue函数@click.prevent的使用解析
更新时间：2022年04月21日 11:49:00 作者：大雷！
这篇文章主要介绍了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标签的时候就不会跳转目标地址链接了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue3中Composition的一些常见API的用法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-06-06
这篇文章主要为大家详细介绍了vue实现移动端多格输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-08-08
本文主要介绍了使用Elemen加上lang=“ts“后编译报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了vue3如何引用elementUI实现悬浮文本输入框效果,以便实现多行文本输入,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要为大家详细介绍了vue实现全选和反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue如何解决代码需要在dom渲染之后执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue使用keep-alive无效以及include和exclude用法解读
这篇文章主要介绍了vue使用keep-alive无效以及include和exclude用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
这篇文章主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了这15个Vue指令,让你的项目开发爽到爆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-10-10
最新评论