亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue.js 移動(dòng)端 Web App 點(diǎn)擊穿透問(wèn)題解決方案

wums / 2584人閱讀

摘要：參考博文也來(lái)說(shuō)說(shuō)事件與點(diǎn)擊穿透問(wèn)題移動(dòng)頁(yè)面點(diǎn)擊穿透問(wèn)題解決方案點(diǎn)擊穿透原理及解決書籍移動(dòng)手冊(cè)以上部分資料搜集整理自網(wǎng)絡(luò)，如有不對(duì)的地方希望及時(shí)告知，歡迎大家批評(píng)指正，謝謝

描述

在近期的一個(gè)移動(dòng)端項(xiàng)目中，有一個(gè)頁(yè)面需要有彈框提示，并且這個(gè)彈框通過(guò)關(guān)閉按鈕關(guān)閉。頁(yè)面當(dāng)中使用了 iScroll 來(lái)實(shí)現(xiàn)頁(yè)面局部滾動(dòng)，在 iScroll 的配置當(dāng)中把 tap 和 click 事件都開啟了。
代碼如下：

this.myScroll = new IScroll(this.$refs.wrapper, {
  mouseWheel: true,
  click: true,
  tap: true
})

在實(shí)現(xiàn)過(guò)程中，遇到了一個(gè)奇怪的問(wèn)題，由于按鈕的位置與彈框右上角的關(guān)閉按鈕位置一致，當(dāng)我點(diǎn)擊按鈕時(shí)，彈框一閃而過(guò)。

效果如下：

原因 什么是點(diǎn)擊穿透？

假如頁(yè)面上有兩個(gè)元素A和B。B元素在A元素之上。我們?cè)贐元素的touchstart事件上注冊(cè)了一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)的作用是隱藏B元素。我們發(fā)現(xiàn)，當(dāng)我們點(diǎn)擊B元素，B元素被隱藏了，隨后，A元素觸發(fā)了click事件。

通過(guò)上網(wǎng)查找有關(guān)資料，翻閱了移動(dòng)端的書籍，發(fā)現(xiàn)在手機(jī)端中，事件的觸發(fā)順序?yàn)椋?b>touchstart -> touchmove -> touchend，而 click 事件有 300ms 的延遲，當(dāng) touchstart 事件把B元素隱藏之后，隔了300ms，瀏覽器觸發(fā)了 click 事件，但是此時(shí)B元素不見了，所以該事件被派發(fā)到了A元素身上。如果A元素是一個(gè)鏈接，那此時(shí)頁(yè)面就會(huì)意外地跳轉(zhuǎn)。

解決方案 1. 改用 touch 事件

由于項(xiàng)目使用的是 Vue.js，這里就提供一下 Vue.js 的解決方法。使用了 vue-tap 的一個(gè)插件，具體使用方法參看官方文檔，在需要點(diǎn)擊事件的時(shí)候，通過(guò) v-tap 指令來(lái)綁定。

// main.js
import vueTap from "v-tap" // 引入插件
Vue.use(vueTap) // 全局注冊(cè)
v-tap="{methods:showReceiveModel}" // 在元素上綁定事件
2. 使用 fastclick 插件

這個(gè)也是在網(wǎng)上看到的，也可以解決點(diǎn)透問(wèn)題，使用方法可以看 fastclick 的文檔，在這里提供一下 Vue.js 的引入及使用

import FastClick from "fastclick"; // 引入插件
FastClick.attach(document.body, options); // 使用 fastclick

最終沒有使用這個(gè)方案是因?yàn)橛幸恍┬?bug ，如 Fastclick 導(dǎo)致click事件觸發(fā)兩次的問(wèn)題。

其他 tap 一詞

對(duì)于 tap 這個(gè)詞，用過(guò) Zepto 或 KISSY 等移動(dòng)端js庫(kù)的人肯定對(duì)tap事件不陌生，做PC頁(yè)面時(shí)綁定 click，相應(yīng)地手機(jī)頁(yè)面就綁定 tap。但原生的 touch 事件本身是沒有 tap 的，js庫(kù)里提供的tap事件都是模擬出來(lái)的。

手機(jī)上響應(yīng) click 事件會(huì)有300ms的延遲，那么這300ms到底是干嘛了？瀏覽器在 touchend 后會(huì)等待約300ms，原因是判斷用戶是否有雙擊（double tap）行為。如果沒有 tap 行為，則觸發(fā) click 事件，而雙擊過(guò)程中就不適合觸發(fā) click 事件了。由此可以看出 click 事件觸發(fā)代表一輪觸摸事件的結(jié)束。

既然說(shuō)tap事件是模擬出來(lái)的，我們可以看下 Zepto 對(duì) singleTap 事件的處理。見 源碼 136-143 行，可以看出在 touchend響應(yīng) 250ms 無(wú)操作后，則觸發(fā) singleTap。

參考 博文

也來(lái)說(shuō)說(shuō)touch事件與點(diǎn)擊穿透問(wèn)題

移動(dòng)頁(yè)面點(diǎn)擊穿透問(wèn)題解決方案

點(diǎn)擊穿透原理及解決

書籍

《移動(dòng) Web 手冊(cè)》

以上部分資料搜集整理自網(wǎng)絡(luò)，如有不對(duì)的地方希望及時(shí)告知，歡迎大家批評(píng)指正，謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84620.html

相關(guān)文章

  • 有價(jià)值的前端技術(shù)點(diǎn)

    摘要：借著產(chǎn)品層面的功能和視覺升級(jí)，我們用對(duì)它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個(gè)讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會(huì)給多名前端開發(fā)者發(fā)送新聞郵件。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門檻越來(lái)越高，很多開發(fā)者對(duì)于網(wǎng)絡(luò)知識(shí)這塊了解的不是很多，遇到這些面試題會(huì)手足無(wú)措。本篇文章知識(shí)主要集中在 HTTP 這塊。文中知識(shí)來(lái)自 《圖解 HTTP》與維基百科，若有錯(cuò)...

    microelec 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    li21 評(píng)論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問(wèn)題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...

    AaronYuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<