vue函数@click.prevent的使用解析

目录
  • @click.prevent的使用
    • @click.prevent的作用是什么？
  • @click.stop与@click.prevent
    • @click.stop
    • @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标签的时候就不会跳转目标地址链接了。

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

赞 (0)

相关推荐

  • vue button的@click方法无效钩子函数没有执行问题

    vue button的@click方法无效钩子函数没有执行问题

    目录 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 跨域问题 userData is not defined Vue的第四个bug 钩子函数(mounted/created) Vue的第五个bug vue @click失效问题 贴代码(直接截图) 解决方法 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 事故还原 小胖做完公司的项目,老大看着小胖疲惫的脸庞,有点心疼小胖,就给小胖放了三天假,没有给小胖新的需

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • vue组件添加事件@click.native操作

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v

  • vue 实现click同时传入事件对象和自定义参数

    vue 实现click同时传入事件对象和自定义参数

    仅仅传入自定义参数 HTML <div id="app"> <button @click="tm(123)">ddddd</button> </div> JS代码 new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e); } } }) 仅仅传入事件对象 HTML <div id="app"> <button @cl

  • vue函数@click.prevent的使用解析

    目录 @click.prevent的使用 @click.prevent的作用是什么? @click.stop与@click.prevent @click.stop @click.prevent @click.prevent的使用 背景 :vue项目操作中遇到@click.prevent函数,场景特殊(项目中有一个自己封装的组件库,因此所有的样式都统一集成,遇到特殊情况想引入特殊UI风格处理时,部分组件需要样式重调,因此用到@click.prevent)特此纪要. @click.prevent的作

  • 关于vue中@click.native.prevent的说明

    关于vue中@click.native.prevent的说明

    目录 关于@click.native.prevent的说明 元素中绑定了这个事件 vue的@click.native.prevent,点击事件加上native.prevent有什么用呢 代码如下 关于@click.native.prevent的说明 元素中绑定了这个事件 <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @c

  • Vue子组件与父组件详细解析

    Vue子组件与父组件详细解析

    目录 一.父组件和子组件 二.模板分离写法 1.template标签 2.text/x-template 三.父子组件通信-父传子 1.Prop 类型 四.父子组件通信子传父 1.vm.$emit( eventName, [-args] ) 五.父子组件通信-结合双向绑定案例 1.基本模板代码 2.增加双向绑定 3.反向绑定 六.组件访问父访问子 一.父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该

  • Vue.js 状态管理及 SSR解析

    Vue.js 状态管理及 SSR解析

    目录 前端状态管理出现的意义及解决的问题 Vuex 源码解读 Vuex 公共方法 Vuex 介绍及深入使用 Vuex 使用(官网) 1.基本框架 2.基本使用 3.State 3.1 mapState 辅助函数 4.Getter 4.1 通过属性访问 4.2 通过方法访问 4.3 mapGetters 辅助函数 5.Mutation 5.1 提交载荷(Payload) 5.2 使用常量替代 Mutation 事件类型 5.3 Mutation 必须是同步函数 5.4 在组件中提交 Mutatio

  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    目录 正文 先看一个简单的问题 内部实现 先看第一块: 再看第二块: 然后是第三块: 最后是第四块: 正文 先看一个简单的问题 <template> <div @click="handleClick" ref="div">{{ text }}</div </template> <script> export default { data() { return { text: 'old' } }, methods:

  • VUE中的无限循环代码解析

    VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • Vue的click事件防抖和节流处理详解

    函数防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = s

  • 浅析vue 函数配置项watch及函数 $watch 源码分享

    Vue双向榜单的原理 大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定,不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原理,所以再次回顾一下: Vue的数据通过Object.defineProperty设置对象的get和set实现对象属性的获取,vue的data下的数据对应唯一 一个dep对象,dep对象会存储改属性对应的watcher,在获取数据(get)的时候为相关属性添加具有对应处理函数的watcher,在设置属性的时候,触发

  • Vue的双向数据绑定实现原理解析

    Vue的双向数据绑定实现原理解析

    这篇文章主要介绍了Vue的双向数据绑定实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.概述 vuejs是采取数据劫持结合发布者-订阅者模式的方式实现model-->view的数据绑定,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的数据回调. 至于view-model的绑定是对表单添加了change(input)的事件 二.思路 1.实现一个数

随机推荐