成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wums / 2496人閱讀

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

描述

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

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

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

效果如下：

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

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

通過上網(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í)頁面就會(huì)意外地跳轉(zhuǎn)。

解決方案 1. 改用 touch 事件

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

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

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

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

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

其他 tap 一詞

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

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

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

參考 博文

也來說說touch事件與點(diǎn)擊穿透問題

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

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

書籍

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84620.html

相關(guān)文章

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

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

    microelec 評論0 收藏0

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

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

    li21 評論0 收藏0

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

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

    AaronYuan 評論0 收藏0

發(fā)表評論

0條評論

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