阻止Antd的Upload组件事件冒泡

最新推荐文章于 2024-08-14 15:58:05 发布
最新推荐文章于 2024-08-14 15:58:05 发布
阅读量3k 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tbapman/article/details/105041201
版权

背景

在这里插入图片描述
在项目中遇到一个需求，+号上传文件，-号能去掉上传的文件，由于±号是包裹在Upload组件中的，导致点击-号也会触发文件上传

解决方案

只需要在-号上绑定一个事件，阻止冒泡即可

//此方法针对chrome有效，对其他浏览器未做兼容

<Icon type="minus" onClick={this.minus.bind(this)} />

minus = e => {
    //阻止冒泡 
    e.stopPropagation();
  };
React中阻止事件冒泡的方法及示例代码
BitSlinger的博客
10-03 1437
当事件触发时，调用该方法可以阻止事件向上冒泡，即停止事件传播到更高层级的组件。根据你的需求选择适合的方法，并在事件处理函数中使用相应的方法来阻止事件传播。在上面的代码中，当点击子组件时，子组件的点击事件处理函数会被触发，并打印出"子组件被点击"。在上面的代码中，当点击子组件时，子组件的点击事件处理函数会被触发，并打印出"子组件被点击"。，父组件的点击事件处理函数不会被触发，因此不会打印出"父组件被点击"。，父组件的点击事件处理函数不会被触发，因此不会打印出"父组件被点击"。方法来阻止事件冒泡。
拖曳上传文件&e.stopPropagation()阻止事件冒泡
weixin_46045444的博客
08-18 558
<style> p{text-align: right;position:relative;left:0%;width:35%;height:5%;top:5%} input{width:60%;color:dimgrey;text-align: center;} </style> <!--<div style="position:absolute;top:5%;width:100%">--> <p> 化合物编号（cid）：&l.
阻止 antd Popover弹框 点击事件冒泡
风小猪的博客
04-11 3409
设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。
antdv组件库事件冒泡
编程小将
01-18 1196
在antdv组件库中，把折叠面板和上传控件一起使用，当点击上传按钮时，虽然会弹出文件选择窗口，但同时每次点击时折叠面板都会切换打开状态。 这是由于事件冒泡，当点击图标的时候穿透到了底下的折叠面板，所以两个事件响应都执行了 要解决这个问题，只需要在extra插槽的顶层标签加上@click.stop.prevent即可，示例如下 <div slot="extra" @click.stop.prevent> <a-upload name="file" :file-list=
antd Upload 在表单中点击label唤出文件选择框的问题
qq_42802698的博客
08-25 958
如果该upload有数量限制，到达一定数量后隐藏上传按钮，但是这样仍可点击label唤出文件选择框来逃过校验。
事件流、事件冒泡、阻止冒泡
lxllxl211的博客
02-21 525
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。可以理解成海底压强大，气泡小，快到海平面时，压强小，气泡大。点击一下：只会弹出儿子了，其他不再弹出。默认会出现冒泡事件：从小到大！
antd upload 上传
01-18
### 关于Ant Design antd Upload组件的使用教程与示例 #### 上传文件前验证行为控制 当利用`beforeUpload`函数尝试阻止不符合条件的文件上传时，如果发现即使返回`false`也无法停止上传过程，则可能是由于事件冒泡...
antd上传组件不自定义上传列表怎么增加点击文件下载
最新发布
04-03
- 默认 `onPreview` 会同时响应文件名和预览图标的点击，若需区分操作，需在 `downloadIcon` 中阻止事件冒泡（如示例中的 `e.stopPropagation()`）。 3. **跨域限制** - 下载远程文件时，需确保服务器配置允许...
CheckboxGroup Events
09-13
: 注意一定要阻止冒泡事件，我在.act-view-answer类里加了pointer-events: none;，然后又在.checkBox取消阻止冒泡 pointer-events: visible; 不然用户手误点到正方形外部也会改变checkBox的样式，导致互斥事件的样式...
面试题精选汇总（实时更新）(评论区欢迎补充)
qq_52700250的博客
08-14 853
面试题精选汇总
2021年web前端开发视频教程零基础自学HTML/VUE/JS全栈项目实战全套课程
DaiMaGe3的博客
03-12 3994
【web前端开发课程介绍】： 随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合， 致力于培养中高等前端工程师。 为什么选择前端开发？ 1、专业无限制：计算机专业、非计算机专业占比3：4 2、适合零基础：专业、性别不限，没有基础也能学习 3、技术上手快：4个月，快速学习、系统掌握 4、职业生涯
微信小程序bindtap事件与冒泡阻止详解
10-16
主要介绍了小程序bindtap事件与冒泡阻止详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中click阻止事件冒泡，防止触发另一个事件
老电影故事的博客
02-25 664
在使用el-upload组件时，在其中放置了一个删除按钮的图片。 当点击图片，本想只删除上传的视频，但是意外触发了el-upload中的事件 解决方法： <i class="el-icon-plus avatar-uploader-icon deleteIcon" @click.stop="deleteImage"></i> 用stop，结果只删除当前预览，不触发上传事件 ...
el-upload解决冒泡
qq_45819473的博客
04-29 1459
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
事件冒泡与阻止冒泡
w_t_y_y的博客
01-19 2463
一、事件冒泡： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）且事件冒泡与位置无关，只跟html代码中的层级关系有关系。例： var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div2.onclick
React中基于antd/antdPro中Upload上传按钮点击删除弹框确认是否删除判断
KisJLLLLLL的博客
05-16 2081
如果你点击Upload或者ProFormUploa删除按钮，就会触发按钮中的onRemove属性，然后你再改变hooks，就会点击确定之后，hooks会慢一步改为true,导致点击弹框出来的确认按钮不会删除，第二时间才会删除，由于函数不能第一时间获取hooks异步更新的值和触发两次onRemove导致的。，一开始我是在showUploadList中的removeIcon属性来修改，给他一个poponfirm弹框，由于根据文档，onRemove中只用return true或者 false来判断是否删除改文件。
antd upload beforeUpload中禁止触发onchange
weixin_43915401的博客
05-31 2615
官网：https://ant.design/components/upload-cn/#components-upload-demo-upload-png-only 稍微加点注释：beforeUpload属性返回false或Promise.reject，只会阻止上传（不会触发上传的请求），但是onchange函数还是会触发的，想要阻止onchange函数，需要beforeUpload返回Upload.LIST_IGNORE 1 返回false或Promise.reject <html> &l
antd+upload不调接口反显数据到upload上
qq_42489794的博客
05-30 985
有的需求上传时不需要调接口但是需要展示文件，展示文件fileList需要uid，status，url，name，使用URL.createObjectURL(file)获取url，upload不使用自动上传，使用customRequest自定义请求不请求接口，如下。
antd的upload组件，阻止默认上传事件（原上传默认会请求一个url，就算什么都不写也会请求）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-08 4931
antd的upload组件，阻止默认上传事件（原上传默认会请求一个url，就算什么都不写也会请求）
antd Upload组件 怎么在打开弹框前 阻止弹框打开
09-19
在Ant Design Vue的Upload组件中，如果你想在点击上传文件前阻止默认的弹出框显示，你可以通过监听`onBeforeUpload`回调函数来实现。这个函数会在上传操作开始之前被触发，你可以在这个时候处理你的逻辑，比如检查...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值