移動端點選事件延遲300ms解決方式
說明：移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。
以下是歷史原因，來源一個公司內一個同事的分享： 2007年蘋果釋出首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器開啟一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個螢幕，但是字型、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。 雙擊縮放是指用手指在螢幕上快速點選兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 原因就出在瀏覽器需要如何判斷快速點選上，當用戶在螢幕上單擊某一個元素時候，例如跳轉連結，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定使用者是單純要點選連結還是要雙擊該部分割槽域進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點選，則瀏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分割槽域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回撥函式處理，需要300ms後才生效，也就間接導致影響其他業務邏輯的處理。
//解決方案： fastclick可以解決在手機上點選事件的300ms延遲 zepto的touch模組，tap事件也是為了解決在click的延遲問題
一、tap.js解決方案
<script src="tap.js"></script> <div id="container"> <button id="button-1">Click event</button> <button id="button-2">Tap event</button> </div> <div id="output"></div> <script> var container = document.getElementById('container') var button1 = document.getElementById('button-1'); var button2 = document.getElementById('button-2'); var output = document.getElementById('output'); var tap = new Tap(container); button1.addEventListener('click', callback, false); button2.addEventListener('tap', callback, false); function callback (e) { e.preventDefault(); var p = document.createElement('p'); p.textContent = 'event: ' + e.type; output.insertBefore(p, output.firstChild); } </script>
二、fastclick.js解決方法
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> * { margin: 0; } body { } .button { background-color: #3d3d3d; border: 0px; height: 80px; width: 80%; font-size: 50px; margin: 10% 0% 0% 10%; color: #fff; } .fu { min-height: 100%; min-width: 100%; background-color: Black; background: rgba(0,0,0,0.4); position: absolute; top: 0; text-align: center; display: none; } .ts { margin: 8% auto; width: 400px; height: 400px; top: 59%; background-color: #fff; text-align: center; } </style> <script src="fastclick.js" type="text/javascript"></script> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="application/javascript"> window.addEventListener('load', function () { FastClick.attach(document.body); }, false); function xian() { $(".fu").show().hide(350); } </script> </head> <body> <div> <div class="but"> <input class="button" type="button" value="點選我" onclick="xian()" /></div> <div class="fu" > <div class="ts"> 我是浮層 </div> </div> </div> </body> </html>