vue事件、阻止事件冒泡等

最新推荐文章于 2024-06-20 07:32:02 发布
最新推荐文章于 2024-06-20 07:32:02 发布
阅读量207 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Quella9002/article/details/106741528
版权

文章目录

事件冒泡

上级dom 元素和下级dom元素 绑定了相同的事件、触发下级的事件，上级的事件会跟着触发 ， 称为冒泡

v-on 事件绑定

v-on:click="fun" 
//简写  @click="fun"

事件修饰符

常用事件修饰符 ： 组织冒泡、组织默认行为、等对事件的前置后置处理

// 说明： 点击后 阻止默认事件，执行fun函数，并且防止冒泡
v-on:click.prevent.stop="fun"

在这里插入图片描述

按键修饰符在这里插入图片描述在这里插入图片描述

组合按钮

在这里插入图片描述

Quella9002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中解决事件冒泡
qq_39890794的博客
05-15 534
例: clickDiv（）{ console.log(“点击了DIV”) } clickBtn（）{ console.log(“点击了btn”) } 当我们点击按钮的时候，控制台就会出现：“点击了btn”和“点击了DIV”， 解决： 1、<button @click.stop=“clickBtn”>按钮 加一个stop 2、<button @click="clickBtn(event)">按钮</button>加一个参数event)">按钮</button&g
Vue:1.事件对象；2.事件的冒泡；3.阻止元素的默认行为
weixin_45631296的博客
04-02 158
1.事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box
vue阻止子元素触发父元素的事件，事件冒泡处理
java_xxxx的博客
02-24 5463
vue阻止子元素触发父元素的事件，事件冒泡处理
vue子元素绑定的事件, 阻止触发父级上的事件处理
phpxxo的博客
07-25 1971
index1.html <html> <head> <style> .parent{ width:200px; background:#ffc; } .child{ list-style: none; border:1px solid red; } </style> <script src="../../libs/vue.js"><
js阻止事件的三种方式
最新发布
2302_80798583的博客
06-20 466
阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type=“submit” 的 input 标签提交表单，你在 onclick 事件处理中调用 event.preventDefault()方法， 那么在点击 submit 后就不会自动提交表单了。但是并不阻止事件冒泡。之后的所有相关的触发事件和动作都不会被执行。阻止事件继续传播，事件冒泡和默认行为都被阻止。立即停止事件在 DOM 层次中的传播，即阻止事件冒泡。但是，并不阻止默认行为。
Vue基础3之事件处理
qq_34306228的博客
11-08 3624
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
js 阻止事件执行
weixin_30697239的博客
04-11 2336
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false event.preventDefault() 阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type="submit" 的 input 标签提交表单，你在 onclick ...
uniapp 之 解决事件冒泡（如：阻止switch 的事件冒泡、nvue 页面阻止事件冒泡）
zhuangvi的博客
04-26 6940
场景描述：   首先需求是点击该项进入该详情页面；点击switch 切换该项的状态；   图片：       错误解决方案：     错误效果：     代码如下： <view class="contacts-item" @tap="toEditContacts"> <view class="item-title"> <view class="item-title-left"> <text class="contacts-name"
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
总结来说，当遇到Vue中阻止冒泡失效的问题时，我们需要确保事件处理器定义在Vue实例的`methods`中，并使用事件修饰符`.stop`来阻止事件冒泡。同时，Vue提供的其他事件修饰符如`.prevent`, `.capture`, `.self` 和 `....
重新认识vue之事件阻止冒泡的实现
10-18
Vue还提供了其他的事件修饰符，如`.prevent`用于阻止默认行为（如表单提交），`.capture`用于在事件冒泡开始时触发事件处理函数，`.self`只在事件发生在目标元素自身时触发，`.once`只触发一次，以及`.passive`优化...
vue绑定的点击事件阻止冒泡的实例
11-29
当我们在使用vue做项目时，经常用到点击事件的绑定，但是我们绑在一个div上，里面的其他按钮（如删除、修改）等按钮也会加载这儿div的点击事件，而事实我们不需要，如何解决： 首先我们来区分事件冒泡、事件捕获是...
nvue 阻止冒泡
m0_50080847的博客
07-14 299
vue 可以直接使用@click.stop="open" nvue @click.stop失效。解决方法： <view @click="open($event)">打开</view> open方法： open(e) {   e.stopPropagation() }
解决uniapp中nvue事件冒泡的问题(stop失效问题)
xsaid的博客
08-04 1135
通过event对象的给子元素加个e.stopPropagation()就可以解决事件冒泡！内层为图片预览点击事件，外层为跳转，
阻止click点击事件
热门推荐
sina_panda
04-11 3万+
网上查了后有一下几种实现方法1.css禁用鼠标点击事件.disabled { pointer-events: none; } 注：（这个没有试过）2.直接使用阻止事件的进行 e.stopPropatation||e.cancelBubble = true jquery 禁用a标签 方法1$(document).ready(function() {
uniapp nvue&vue阻止事件冒泡
weixin_45881304的博客
03-04 281
【代码】uniapp nvue&vue阻止事件冒泡。
vue阻止事件冒泡
weixin_49203377的博客
05-17 2万+
我们在使用antdesign或者element等UI框架的时候，会遇到事件冒泡的问题，如何阻止呢？ 在普通的vue中如果要阻止事件冒泡通常只需要在click点击事件上.stop就可以像下面这样 <div @click.stop="handleEdit(row)">编辑</div> 这是因为 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 在使用UI框架的时候 有时候上面并没用点击事
vue中阻止冒泡事件
qq_40666120的博客
05-12 1万+
vue冒泡事件 事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止 <script> window.onload = function(){ var vm = new Vue({ el:'#app', data:{ }, met
Vue2点击阻断事件
weixin_49554584的博客
04-05 1672
当父组件将内部所有元素包含时，点击最外层的view会整体触发该事件，但是我想在内部的点击事件只触发内部单独事件，就会用到以下方法 这样就会阻断外部父组件的点击事件，只执行内部事件。更加符合使用要求 ...
vue 阻止icon上的点击事件_vue事件点击穿透解决大法
weixin_28839439的博客
02-03 1343
最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：一，click与300ms延迟vue框架内置指令v-on:click有300ms的延迟响应，这是为了判断区分单击和双击。vu...
vue3阻止事件冒泡
08-17
在 Vue 3 中阻止事件冒泡的方法与 Vue 2 有所不同。在 Vue 3 中，你可以使用 `.stopPropagation()` 方法来阻止事件冒泡。这个方法需要在事件处理函数中调用，例如： ```html <button @click="innerClick">Inner...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值