作者/sherry

最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。

经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：

一，click与300ms延迟

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

自定义v-tap指令：

Vue.directive('tap',{ bind:function(el,binding){ var startTx, startTy,endTx,endTy,longClick,timeOutEvent, longMethod=binding.value.longMethod, method = binding.value.method, params = binding.value.params, propagation=binding.value.propagation; el.addEventListener("touchstart

如果觉得《vue 点击弹出文字_vue事件点击穿透解决大法 看这篇文章就够了》对你有帮助，请点赞、收藏，并留下你的观点哦！