作者/sherry

最近在做項目的過程中遇到一個非常奇葩的bug，在h5頁面點擊一個按鈕彈出彈窗，但是這個彈窗剛出現(xiàn)就會自動消失，導致屏幕出現(xiàn)閃動現(xiàn)象，關(guān)鍵這個bug還是偶現(xiàn)的。

經(jīng)過一番研究才發(fā)現(xiàn)是vue事件點擊穿透引起的，而且彈窗一定要在300ms內(nèi)出現(xiàn)才會引發(fā)這個bug，接下來分析具體原因：

一，click與300ms延遲

vue框架內(nèi)置指令v-on:click有300ms的延遲響應，這是為了判斷區(qū)分單擊和雙擊。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

總結(jié)

以上是生活随笔為你收集整理的vue 点击弹出文字_vue事件点击穿透解决大法，看这篇文章就够了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。