Vue中@click.stop与@click.prevent
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">百度</a>
</view>
但如果我们不想让它跳转但还想使用a标签的话,此时就需要使用@click.prevent
方法:
<view class="example-body"><a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
</view>
这时再点击a标签的时候就不会跳转目标地址链接了。
Vue中@click.stop与@click.prevent相关推荐
- Vue中的事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @cli ...
- Vue @click.stop 与 @mousewheel.prevent
@click.stop 点击子标签不需要触发父标签的事件 <div @click="tempClick"> <div @click.stop="su ...
- @click.stop和@click.prevent区别
click.stop stop:指的是阻止父组件(节点)的事件冒泡... <div id="app"><div class="box" @cl ...
- 24. Vue防抖,禁止double click
Vue 防抖 如果按钮不做防抖限制,用户手滑或者其他场景大概率会出现重复调用接口的情况,比如编辑角色时,多次点击submit,会出现非预期请求. 为避免重复点击问题,可以加一个自定义组件将按钮禁用一段 ...
- vue和react相同点_我在React和Vue中创建了相同的应用程序。 这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
- Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为 在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
傍晚的月亮 前言 原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令 要讲自定 ...
- vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
- vue中 点击事件的写法_vue中的事件:原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件 这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
最新文章
- 伯克利论断:Serverless 才是云时代的主宰
- head.s 剖析——Linux-0.11 剖析笔记(五)
- 久谦咨询python笔试题目_【久谦咨询面试|面试题】-看准网
- 这6部顶级数学纪录片,告诉你数学一点都不无趣!
- 兴城职高计算机,兴城学计算机,兴城学计算机去哪里,兴城学计算机一般工资能拿多少 - IT教育频道...
- Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
- Excel小账本的来历
- 丹琦女神的对比学习新SOTA,在中文表现如何?我们补充实验后,惊了!
- python学习之路四(类和对象1)
- atitit.编辑表单的实现最佳实践dwr jq easyui
- springcloud与springcloudalibaba版本对应关系
- 里奥·梅西(Lionel Messi)-----球场上舞动的红蓝精灵
- 对决:腾讯对360摊牌
- Linux 桥接ping不通外网(特别是校园网) 解决方式及错误总结
- 自定义滚动条使用(scrollbar样式设置)
- 解决go mod拉取etcd依赖包报错的问题
- Ubuntu Linux安装PyQt5并配置Qt Designer
- 猫扑的博客怎么了???
- 宝宝Oracle学习总结
- 玩过这些经典单机游戏,就说明你已经老了
热门文章
- 在局域网被网络管理员限制了远程连接的默认端口3389,导致无法远程桌面连接
- redis 学习笔记
- Android 第三方应用广告拦截实现
- ap计算机知识点总结,AP统计学考试知识点汇总
- 免费mysql数据库_免费mysql空间,免费数据库,免费MYSQL云数据库申请 | 帮助信息-动天数据...
- 机器学习的transformer
- 字符串匹配算法之Aho-Corasick
- java-net-php-python-jAVANICE体育用品交易网站系统计算机毕业设计程序
- Pandas(七)--分组、合并和连接
- Appium_3_环境配置_Appium-desktop配置