vue 阻止icon上的点击事件_vue事件点击穿透解决大法

最新推荐文章于 2023-04-26 08:34:27 发布
最新推荐文章于 2023-04-26 08:34:27 发布
阅读量1.3k 收藏 1
点赞数
文章标签： vue 阻止icon上的点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_28839439/article/details/113581601
版权

最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：

一，click与300ms延迟

vue框架内置指令v-on:click有300ms的延迟响应，这是为了判断区分单击和双击。vue为移动端提供了触摸方法touchstart、touchmove、touchend，但却没有提供tap指令，因此需要自己手动定义v-tap去消除300ms延迟，提升移动端用户体验。

165e491f7208cfdacbcd395b4720a7c3.png

自定义v-tap指令可以参考我之前的文章

sherry慈：分别用vue和Android实现长按券码复制功能​zhuanlan.zhihu.com
zhihu-card-default.svg


看似tap事件完美解决了移动端延迟响应的问题，但是它却有个致命的缺点：touch之后300ms会触发click

回到我上面提到的那个

最低0.47元/天 解锁文章
paxzone
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue绑定的点击事件阻止冒泡的实例
08-28
下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
对vue中的事件穿透与禁止穿透实例详解
10-16
今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中的observe 依赖注入provide inject element 中icon添加点击事件
m18697787579的博客
10-17 938
2.之前子代向祖父代传值是一直emit，其实可以使用 provide inject来传值。1.类似于微型的vuex，vue.observe。
android 高德地图多个marker带图显示_VUE集成高德地图自定义Marker图标及事件
weixin_39687990的博客
11-23 855
在项目中需要利用Marker对地图位置进行自定义标记，想使用自己的图标，并在点击Marker时需要弹出框显示对象信息，并且做后续自定义的操作。 高德地图上自定义单位Marker有介绍，但自定义多个使用的方法不是一样，并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题，导致信息窗口显示不正常。这个坑到处找资料，花了整整2天才全部搞定。一、需求 根据用户...
Vue2点击阻断事件
weixin_49554584的博客
04-05 1622
当父组件将内部所有元素包含时，点击最外层的view会整体触发该事件，但是我想在内部的点击事件只触发内部单独事件，就会用到以下方法 这样就会阻断外部父组件的点击事件，只执行内部事件。更加符合使用要求 ...
vue 阻止点击事件穿透
qq_36657291的博客
08-24 1470
vue 阻止点击事件穿透
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
10-17
主要介绍了vue 界面在苹果手机上滑动点击事件等卡顿解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 项目引入echarts 添加点击事件操作
10-14
主要介绍了vue 项目引入echarts 添加点击事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue 绑定对象内点击事件失效问题
10-18
今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js阻止click事件穿透
Harry Blog
04-26 2894
将 @click=“fn” 改为 @click.stop=“fn” 即可
禁用的来源disabled以及只读readonly，Vue给icon加禁用
weixin_46037781的博客
08-16 2654
一、禁用disabled来源 众所周知，在element ui的button可以添加disabled参数来让按钮不能点击且鼠标会有一个禁用标符。 disabled表示禁用input元素，不可编辑，不可复制，不可选择，不能接收焦点,，后台不能接收到传值. <input type="button" disabled="disabled" /> 二、只读readonly readonly表示此域的值不可修改，仅可与 type=“text” 配合使用，可复制，可选择,可以接收焦点，后台能接
vue+element实现按钮不可点击、上传、嵌套页面交互等
Mark的博客
12-16 901
log: 1、实现下拉框选择参数后可点击按钮 2、文件上传 3、iframe嵌套 <template> <div> <div> <el-row :gutter="15"> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"> <el-col :span="4.
vue中阻止事件穿透的方法
weixin_30307921的博客
09-04 3183
默认情况下，事件在h5页面会穿透传递，比如一div里面套一个div，点击上层div，下层div也会响应 要阻止事件穿透，使用event.stopPropagation(); 代码示例： <div @click="testout($event)> <div @click="testin($event)"></div> </div> ........
icon可以使用点击事件嘛
MYmayue的博客
12-08 2064
使用了一个Element UI中的icon图标，想对它设置点击事件，发现不生效。.onclick = " "，这样并不起作用。因为icon是以伪元素的形式存在的，这样是无法获取事件的。转载自：https://www.jianshu.com/p/1e7eadff54a8。icon元素.style.pointerEvents = " none"利用这个提示，首先获取icon元素，然后再利用。就可以实现对icon元素的事件禁用。
vue element表格如何动态设置按钮禁用状态？
xiejnpeng的博客
12-18 4953
我们只需在按钮内设置属性 :disabled="scope.row.**== ‘实际值’ " 如下图所示，disabled的值为true时禁用，false时为启用 scope.row.xx代表当前行的某个变量 举例： <el-button size="mini" type="text" :disabled ="scope.row.state == 1" icon="el-icon-edit" @click="handleUpdate(scope.row)"
el-collapse 折叠面板标题带输入框或按钮 阻止事件传递
chengjiayijiu的博客
06-28 2892
记录：el-collapse折叠面板标题上添加按钮 或者input 时会出现点击按钮或者输入框时，面板折叠展开，如果是按钮的时候通过@click.stop.prevent 就可以阻止事件传递到父组件。但是需求是在折叠面板上添加搜索框，这个时候点击input和回车、空格都会引起面板折叠。通过@click.stop.native阻止点击输入框时引起面板事件@keyup.XXX.stop.native阻止键盘事件传播带输入框时阻止 回车搜索，输入和点击阻止折叠面板展开收缩按钮阻止点击 事件...
vue 防止重复执行点击事件
weixin_48927323的博客
05-24 4199
在vue项目中防止用户在一定时间内频繁点击按钮触发事件 方法一: 在规定时间内将按钮禁用的方法： 主要思想就是禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击。 <template> <div> <div @click="clickHandle()">我是点击事件</div> </div> </template> <script> expor.
vue自定义指令，防止按钮重复点击
前端程序猿的博客
05-25 1797
一、创建文件preventReClick.js将下面代码拷贝进文件 import Vue from 'vue' // 自定义指令防止按钮重复点击 v-preventReClick export default { inserted(el, binding, vnode) { el.addEventListener('click', () => { // 是否可见 if (!el.disabled) { el.disabled = true
Uniapp点透事件与阻止
weixin_42216094的博客
09-13 7716
uniapp中解决点透事件的正确姿势。
vue阻止点击事件穿透
最新发布
10-11
可以在事件处理函数中使用`event.stopPropagation()`方法来阻止点击事件的穿透。例如： ``` 按钮 methods: { handleClick() { console.log('点击了div') }, handleBtnClick(event) { event....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值