vue中click阻止事件冒泡，防止触发另一个事件

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

在使用el-upload组件时，在其中放置了一个删除按钮的图片。
在这里插入图片描述

当点击图片，本想只删除上传的视频，但是意外触发了el-upload中的事件

解决方法：

<i class="el-icon-plus avatar-uploader-icon deleteIcon" @click.stop="deleteImage"></i>

用stop，结果只删除当前预览，不触发上传事件

老电影故事
关注
专栏目录
vue中阻止click事件冒泡,防止触发另一个事件的方法
08-28
需要注意的是，虽然`.stop`可以防止事件冒泡，但并不会阻止在同一元素上的其他事件处理器的执行。如果需要完全阻止事件的处理，可能还需要结合其他策略，如使用`event.stopPropagation()`。 总的来说，Vue的事件...
vue屏蔽点击事件
飞翔༒之翼
11-20 3935
思路如果不能点击就 return false： //调用,table的方法,展开/折叠 行 clickTable(row, column, cell, event){ if (column.label == '操作') { return false // 判断为"操作"栏的就不用展开table } else { this.$refs.refTable.toggleRowExpansion(row) } }, 就是这个操作，在点击整行是要展开的，但这样点
vue中阻止@click事件冒泡
xiao白的博客
05-27 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, max...
Vue中@click.stop与@click.prevent
最新发布
weixin_43589681的博客
08-06 418
如果用@click.stop,此时子组件（节点）会阻止父组件（节点）的click方法执行，即阻止父节点冒泡。运行结果先alert（boxchild）在alert（box）stop:指的是阻止父组件（节点）的事件冒泡。
Vue中@click.stop与@click.prevent、@click.native
qq_40925546的博客
06-21 8504
Vue中@click.stop与@click.prevent、@click.native
el-upload解决冒泡
qq_45819473的博客
04-29 1287
el-upload解决冒泡 解决el-upload与父元素的冒泡 两种解决方案 1.在该组件外面套个 div，div 直接写 @click.stop 即可 <div @click.stop> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList"&gt
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的解决方案。 一、问题描述 在Vue框架中，我们...
vue绑定的点击事件阻止冒泡的实例
08-28
例如，在上面的代码中，我们在一个 div 元素上绑定了一个点击事件，但是，我们不想让该事件冒泡到父元素上。那么，我们可以使用.stop 修饰符来阻止事件冒泡。 例如，在下面的代码中，我们在 button 元素上绑定了一...
[element-ui] v-click-outside与el-dialog同时存在，出现的Bug
qq_14993591的博客
06-29 928
来阻止 el-dialog 内部的点击事件冒泡。点击盒子aaa外部，盒子aaa隐藏。里的任意内容，盒子aaa也隐藏了。里的任意内容，盒子aaa不隐藏。绑在了body上，点击。
vue中阻止click事件冒泡（防止触发另一个事件）的方法
热门推荐
weixin_42365757的博客
08-25 4万+
方法一：使用vue阻止子级元素的click事件冒泡。简单得：可以直接用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。 方法二：可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @
阻止Antd的Upload组件事件冒泡
tbapman的博客
03-23 2918
背景 在项目中遇到一个需求，+号上传文件，-号能去掉上传的文件，由于±号是包裹在Upload组件中的，导致点击-号也会触发文件上传 解决方案 只需要在-号上绑定一个事件，阻止冒泡即可 //此方法针对chrome有效，对其他浏览器未做兼容 <Icon type="minus" onClick={this.minus.bind(this)} /> minus = e => { ...
vue click阻止事件冒泡与默认行为
weixin_43829905的博客
05-14 1万+
vue click阻止事件冒泡与默认行为阻止事件冒泡阻止默认行为 阻止事件冒泡 <div @click="click1()" > <a @click="click2()"></a> </div> //正确写法 <div @click="click1()" > &...
vue阻止弹窗_在vue中实现点击选择框阻止弹出层消失的方法
weixin_42593130的博客
01-30 1040
在vue项目中，选择性别是用的一个弹出层，选择男女已经给这个.sex层绑定了一个v-show条件，实现了点击显示隐藏的效果但是因为这个效果是加在父级上，所以在选择性别的时候，也会关闭弹出层，这个问题其实是一个冒泡事件，要解决这个问题用vue的阻止冒泡的属性stop即可这个方法不写也可以，或者写成除了这个地方以外，还有一个弹出层，需要点击弹出层以外的地方关闭这个弹出层，如图：如：toggleexpo...
vue下拉框点击空白区域关闭弹框
qq_32615575的博客
10-23 1654
组件当前点击 如果采取冒泡阻止 .stop（页面只引用单个组件的时候） <template> <div class="comtainer"> <div @click.stop="handleInput" class="select-selection" ref="selectSelection"> </div> </div> <template> Document 事件绑...
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 1万+
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
vue事件修饰符（阻止事件冒泡、阻止默认事件....）
weixin_43623808的博客
12-05 4501
这应该是vue提供给程序员的语法糖确实很好用。官方说法是： 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。（双手双脚赞同） 这也能让函数看着更干净，爽就完了！ .stop（阻止事件冒泡） .pre...
vue 阻止事件冒泡和捕获
学习 记录 总结 分享
05-10 5369
阻止事件冒泡: 阻止事件默认行为: 事件只作用在元素本身，而不是其子元素要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法。
vue中单个阻断和全局阻断请求
weixin_47941995的博客
03-22 718
index.vue--->在请求接口时，除了传递参数，再传递一个this过去。---> API接口处，引入axios，定义CancelToken，写new CancelToken。
vue中如何阻止事件冒泡
04-19
例如，在一个按钮上添加 click 事件并阻止事件冒泡，代码如下： ``` <button @click.stop="doSomething">点击我 ``` 这样，在点击按钮时，事件处理函数 `doSomething` 不会触发到该元素的父元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老电影故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值