在近期的乙個移動端專案中，有乙個頁面需要有彈框提示，並且這個彈框通過關閉按鈕關閉。頁面當中使用了 iscroll 來實現頁面區域性滾動，在 iscroll 的配置當中把tap和click事件都開啟了。
**如下：
mousewheel: true,
click: true,
tap: true
})在實現過程中，遇到了乙個奇怪的問題，由於按鈕的位置與彈框右上角的關閉按鈕位置一致，當我點選按鈕時，彈框一閃而過。
效果如下:
假如頁面上有兩個元素a和b。b元素在a元素之上。我們在b元素的touchstart事件上註冊了乙個**函式，該**函式的作用是隱藏b元素。我們發現，當我們點選b元素，b元素被隱藏了，隨後，a元素觸發了click事件。
通過上網查詢有關資料，翻閱了移動端的書籍，發現在手機端中，事件的觸發順序為：touchstart->touchmove->touchend，而click事件有 300ms 的延遲，當touchstart事件把b元素隱藏之後，隔了300ms，瀏覽器觸發了click事件，但是此時b元素不見了，所以該事件被派發到了a元素身上。如果a元素是乙個鏈結，那此時頁面就會意外地跳轉。
由於專案使用的是vue.js，這裡就提供一下vue.js的解決方法。使用了 vue-tap 的乙個外掛程式，具體使用方法參看官方文件，在需要點選事件的時候，通過v-tap指令來繫結。
// main.js
import vuetap from 'v-tap' // 引入外掛程式
vue.use(vuetap) // 全域性註冊
v-tap="" // 在元素上繫結事件vue.js的引入及使用
import fastclick from 'fastclick'; // 引入外掛程式
fastclick.attach(document.body, options); // 使用 fastclick
對於tap這個詞，用過zepto或kissy等移動端js庫的人肯定對tap事件不陌生，做pc頁面時繫結click，相應地手機頁面就繫結tap。但原生的touch事件本身是沒有tap的，js庫里提供的tap事件都是模擬出來的。
手機上響應click事件會有300ms的延遲，那麼這300ms到底是幹嘛了？瀏覽器在touchend後會等待約300ms，原因是判斷使用者是否有雙擊（double tap）行為。如果沒有tap行為，則觸發click事件，而雙擊過程中就不適合觸發click事件了。由此可以看出click事件觸發代表一輪觸控事件的結束。
既然說tap事件是模擬出來的，我們可以看下zepto對 singletap 事件的處理。見 原始碼 136-143 行，可以看出在touchend響應 250ms 無操作後，則觸發singletap
webapp 移動端開發
h5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 將 新增到主螢幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式 移動端如何定義字型font family body中文字型使用系統預設即可，英文用helvetic...
移動端web app開發備忘
近期要做個手機html5的頁面，做些知識儲備，重要的點記錄下來以備興許。1.devicepixelratio 定義裝置物理象素和裝置獨立象素的比例。css中的px能夠看作是裝置的獨立象素。通過devicepixelratio。就能夠知道裝置上的乙個css畫素代表著多少個物理畫素，能夠考慮device...
移動端webApp之大前端 一
由於移動端的手機螢幕跟pc端不同，解析度也是五花八門，所以對於移動端前端頁面布局就是很大的挑戰。不過我們既然知道了移動端跟pc端不同 就可以有針對性的進行開發，畢竟移動端的瀏覽器不牽扯到太多pc端似的各種坑爹的相容！viewport 不得不說的是viewport，這是移動端開發必備的乙個meta標籤...