vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法-程序员宅基地
技术标签： vue 点击一个按钮触发两个事件
最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：
一，click与300ms延迟
vue框架内置指令v-on:click有300ms的延迟响应，这是为了判断区分单击和双击。vue为移动端提供了触摸方法touchstart、touchmove、touchend，但却没有提供tap指令，因此需要自己手动定义v-tap去消除300ms延迟，提升移动端用户体验。
自定义v-tap指令可以参考我之前的文章sherry慈：分别用vue和Android实现长按券码复制功能zhuanlan.zhihu.com
看似tap事件完美解决了移动端延迟响应的问题，但是它却有个致命的缺点：touch之后300ms会触发click
回到我上面提到的那个bug，因为我给按钮绑定的是tap事件，而弹窗是click。当我点击按钮弹出弹窗后，刚好在屏幕相同的位置触发了弹窗的click事件，因此弹窗消失。而且一定要在300ms内发生，如果弹窗出现时间较长，大于300ms，则不会出现这个问题，这也就是为什么那个bug是偶现的。
bug隐藏得够深啊，过了好久才想明白
二，解决方案
1，v-on:click和v-tap不要混用
还是拿上面那个例子来说明。如果页面里面的元素是v-tap，弹窗是v-on:click则可能出现页面闪动；反之有可能穿透弹窗，引发页面按钮的点击。因为这个时候弹窗消失了，touch300ms后引发的click事件会作用在屏幕相同位置的按钮上。
2，阻止单击事件继续传播
v-on:click.stop
event.stopPropagation() 。 // 对click和touch都适用，但是防不住touch300ms后引发click
3，css中的pointer-events
这个属性确切地说不是用来阻止vue事件点击穿透，而是精确地控制点击事件的响应元素
pointer-events的值有两个：auto / none，auto是默认值，none表明该元素不响应点击事件，该事件继续往下传递
三，小彩蛋
既然本文主要围绕h5页面和弹窗的点击穿透事件讲解，那我顺便分享个滑动穿透的解决技巧。
当h5页面内容较多，一屏展示不下时，在y方向是可以滑动的。这时候如果弹出弹窗，弹窗本身是不可滑动的，但是滑动弹窗，会引发弹窗下面H5页面的滑动。我之前的解决办法是用watch方法，监视弹窗的弹出状态动态设置h5页面的style属性：overflow-y 为auto或者hidden。
后来发现还有更优雅的解决办法，只需要防止弹窗的滑动穿透即：@touchmove.prevent=""，但要注意此时不能给.'right-description'设置pointer-events: none;属性。
作为一名开发，写出来的代码不仅要满足产品基本需求，还要更优雅简单才好。H5进阶之路还很漫长，共勉......
智能推荐
jsonString 常用方法_josnstring-程序员宅基地
文章浏览阅读1.2k次。1. Map 转Json Stringimport com.google.gson.Gson;Map<String,Integer> indicatorDetails = new HashMap<>();Gson gson = new Gson();String jsonStr = gson.toJson(indicatorDetails);2...._josnstring
ios发布App遇到的问题：“*证书*”has one iOS Distribution certificate but its private key is not installed_has one ios distribution but its private key is no-程序员宅基地
文章浏览阅读1.1k次。解决方法：重新创建certificate证书，上传本机的CSR证书认证文件3.Production(一般只能创建3次)选中:App Store and Ad Hoc 然后下载证书到桌面，双击安装后，重新发布app到App Store中即可 转载自:https://blog.csdn.net/yishengzhiai005/article/details/7863..._has one ios distribution but its private key is not installed
Houdini VEX 学习笔记 (二)-程序员宅基地
文章浏览阅读1.1k次。//利用属性分开PrimitivePrimitive Split 节点中Attribute 设置为split 。Wrangle中代码为: f@split = @ptnum>10?1:4; 比较程序化的是利用Houdini 的Paint 节点，给物体描绘上颜色，然后利用颜色属性把Primitive 分开//曲线（在Vex中实现Carve节点的功能）最近在做植物生长的r..._houdini adjustprimlength
Qt+OSG/osgEarth跨平台编译（用Qt Creator组装各个库，实现一套代码、一套框架，跨平台编译）_qt osgearth-程序员宅基地
文章浏览阅读5.6k次，点赞9次，收藏46次。Qt+OSG/osgEarth跨平台编译（Windows、linux、macos）。用Qt Creator组装各个库，实现一套代码、一套框架，完成跨平台编译第三方库；实现一套代码、一套框架，完成跨平台编译OSG核心库、工具库、插件库及内省库，osgEarth核心库及插件库。_qt osgearth
【CCNA Exploration 4.0 路由协议和概念1】-程序员宅基地
文章浏览阅读184次。 一、路由器接口管理端口 路由器包含用于管理路由器的物理接口。这些接口也称为管理端口。与以太网接口和串行接口不同，管理端口不用于转发数据包。最常见的管理端口是控制台端口。控制台端口用于连接终端（多数情况是运行终端模拟器软件的 PC），从而在无需通过网络访问路由器的情况下配置路由器。对路由器进行初始配置时，必须使用控制台端口。 另一种管理端口是辅助端口。并非所有路由器..._路由器接口负责接收和转发数据包，接口类型有
Proteus 8 Professional中的基本元器件_proteus 8 professional元器件对照表-程序员宅基地
文章浏览阅读1.4w次，点赞12次，收藏32次。英文名称中文名称图片BUTTON复位开关Resistors电阻crystal晶振_proteus 8 professional元器件对照表
随便推点
手动安装python包遇到error:could not find suitable distribution for Requirement.parse(‘certifi＞=2017.4.17‘)-程序员宅基地
文章浏览阅读1.2w次，点赞6次，收藏5次。前天执行脚本时调用了一个requests库，把脚本放到了linux系统里跑了一下，提示找不到该库。那简单啊，pip下载不就好了！pip install requests啊哦 出错了在经历了多轮百度后。。。没什么效果，排查了一圈dns，代理，下载源，发现可能是我的网络有问题。没办法了，只能手动了先去网站上把我需要的包下下来，https://pypi.org/project/requests，下载完成，解压后放在python安装目录sitepackages下，执行python setup.py i_could not find suitable distribution for requirement.paser（pynacl)
深度学习之经典神经网络框架详解（四）：ResNet-v1残差神经网络_resnetv1-程序员宅基地
文章浏览阅读3.3k次，点赞2次，收藏10次。Deep Residual Learning for Image Recognition简述：残差神经网络在2015年ILSVRC比赛中获得冠军，且多个方面获得了第一名。随着网络深度的增加，梯度在反向传播过程中会逐渐消失，导致无法对前面的网络层的权重进行有效的调整，致使准确率逐渐饱和然后迅速下降。本文提出了一个残差学习框架来简化网络训练，实验表明该网络更易优化，且大幅增加深度的同时获得高的精度..._resnetv1
使用C++实现LR(0)语法分析器的操作_c++lr0-程序员宅基地
文章浏览阅读1.2w次，点赞16次，收藏99次。使用C++ 完成LR(0)的语法分析器由于最近学校里在学习编译原理，而且要求实现语法分析器，于是我用了几天的时间搞明白了语法分析器的原理并且将其实现了。由于编者还是本科生而且还在学习中，因此出现什么错误请各位指点。语法分析器的步骤为：读入单词序列读入语法规则构造基于该语法的Clousure（项目集规范族）集合基于上一步构造所有规范句型活前缀的DFA根据这个DFA来构造Action表..._c++lr0
Odoo XML中操作记录与函数-程序员宅基地
文章浏览阅读570次。转载请注明原文地址：https://www.cnblogs.com/ygj0930/p/10826037.html一：XML文件中定义记录 XML中定义记录： 每个<record>元素有两个基本属性id和model，并且包含为每列分配值的<field>元素。如前所述，id属性对应于记录的外部标识符，模型属性对应于要写入..._odoo xml调用后台函数
LTE技术简介_lte标准-程序员宅基地
文章浏览阅读3.3w次，点赞3次，收藏41次。我们知道，LTE是一个和WCDMA、GSM类似的术语，指的是移动通信的一种技术体系。不过和WCDMA、GSM的命名方式又不太一样，从WCDMA我们可以看出所采用的关键技术，从GSM我们可以看到应用场合，从LTE的命名中，似乎看不出技术特点和应用场合，是一种玄妙的命名方式。一说到LTE，就会想到4G。移动通信技术经历了1G、2G、3G、4G，到现在的5G，分别表示的是第一、二、三、四、五代移动通信系统，每一代都有各自的主流移动通信技术。目前，GSM和WCDMA可以当之无愧地称为2G和3G的主流移动通信技术。_lte标准
【Tensorflow2.0】Tensorflow2.x的安装教程_couldn't get ptxas version string: internal: could-程序员宅基地
文章浏览阅读10w+次，点赞123次，收藏722次。anaconda 可以使tensorflow的安装变的简单昨天tensorflow 开发者大会刚开完，会上发布了关于 TensorFlow 2.0，TensorFlow Lite，TensorFlow.js，Swift for TensorFlow，TFX 等产品生态体系的最新更新和首次发布的内容，2019年任会支持tensorflow1.x,但是我们相信，版本的升级会带来易用性和使用性能的提升......_couldn't get ptxas version string: internal: couldn't invoke ptxas.exe --ver