轉自：http://blog.csdn.net/xdongll/article/details/51908994
說明：移動設備上的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>
- <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>
