mui 在ios和微信 click延遲載入
說明:移動裝置上的web網頁是有300ms延遲的,玩玩會造成按鈕點選延遲甚至是點選失效。
以下是歷史原因,來源一個公司內一個同事的分享: 2007年蘋果釋出首款iphone上IOS系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上,使用了雙擊縮放(double tap to zoom)的方案,比如你在手機上用瀏覽器開啟一個PC上的網頁,你可能在看到頁面內容雖然可以撐滿整個螢幕,但是字型、圖片都很小看不清,此時可以快速雙擊螢幕上的某一部分,你就能看清該部分放大後的內容,再次雙擊後能回到原始狀態。 雙擊縮放是指用手指在螢幕上快速點選兩次,iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 原因就出在瀏覽器需要如何判斷快速點選上,當用戶在螢幕上單擊某一個元素時候,例如跳轉連結
//解決方案: fastclick可以解決在手機上點選事件的300ms延遲 zepto的touch模組,tap事件也是為了解決在click的延遲問題
一、tap.js解決方案
- <script src="tap.js"></script>
- <div id="container">
- <
- <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解決方法
這樣寫。引入下fastClick.js
下載地址:https://download.csdn.net/download/qq_32069845/10389973
FastClick.attach(document.body);
mui("#content").on("tap","#allTab",function(){ options.pagerData= $.toJSON({'params':{'type':"all",'code':'single', 'timestamp': timestamp}}); initPageList(options); });