国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js 移動端 Web App 點擊穿透問題解決方案

wums / 2451人閱讀

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

描述

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

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

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

效果如下：

原因 什么是點擊穿透？

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

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

解決方案 1. 改用 touch 事件

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

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

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

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

最終沒有使用這個方案是因為有一些小 bug ，如 Fastclick 導致click事件觸發(fā)兩次的問題。

其他 tap 一詞

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

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

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

參考 博文

也來說說touch事件與點擊穿透問題

移動頁面點擊穿透問題解決方案

點擊穿透原理及解決

書籍

《移動 Web 手冊》

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

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

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

相關(guān)文章

  • 有價值的前端技術(shù)點

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

    microelec 評論0 收藏0

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

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

    li21 評論0 收藏0

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

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

    AaronYuan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<