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标签的时候就不会跳转目标地址链接了。

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

您可能感兴趣的文章:

Vue+Flask实现图片传输功能
这篇文章主要为大家详细介绍了Vue+Flask实现图片传输功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
使用vue脚手架（vue-cli）搭建一个项目详解
这篇文章主要介绍了vue脚手架（vue-cli）搭建项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Vue实现轮播图组件的封装
Vue轮播图组件的封装可通过封装组件、使用插件、配置化等方式实现，主要包括图片预加载、定时轮播、无限滚动、手势滑动、响应式布局等功能，实现方式可使用Vue的生命周期函数、自定义事件、计算属性等技术
2023-04-04
Element UI 自定义正则表达式验证方法
今天小编就为大家分享一篇Element UI 自定义正则表达式验证方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue单向数据绑定和双向数据绑定方式
这篇文章主要介绍了vue单向数据绑定和双向数据绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue打包部署到Nginx时,css样式不生效的解决方式
这篇文章主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解VScode编辑器vue环境搭建所遇问题解决方案
这篇文章主要介绍了VScode编辑器vue环境搭建所遇问题解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue中axios的二次封装实例讲解
在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结，需要的朋友们可以学习下。
2019-10-10
Vue Router路由hash模式与history模式详细介绍
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转
2022-08-08