作者/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事件点击穿透解决大法，看这篇文章就够了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。