无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

為什么移動端點擊事件要加300ms延遲呢？

早在 2007 年初，蘋果公司在發(fā)布首款 iPhone 前夕，遇到一個問題：當(dāng)時的網(wǎng)站都是為大屏幕設(shè)備所設(shè)計的。于是蘋果的工程師們做了一些約定，應(yīng)對 iPhone 這種小屏幕瀏覽桌面端站點的問題。

這當(dāng)中最出名的，當(dāng)屬雙擊縮放(double tap to zoom)，這也是會有上述 300 毫秒延遲的主要原因。

雙擊縮放，顧名思義，即用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例。 那么這和 300 毫秒延遲有什么聯(lián)系呢？

假定這么一個場景： 用戶在 iOS Safari 里邊點擊了一個鏈接。由于用戶可以進(jìn)行雙擊縮放或者雙擊滾動的操作，當(dāng)用戶一次點擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實要打開這個鏈接，還是想要進(jìn)行雙擊操作。因此，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。 鑒于iPhone的成功，其他移動瀏覽器都復(fù)制了 iPhone Safari 瀏覽器的多數(shù)約定，包括雙擊縮放，幾乎現(xiàn)在所有的移動端瀏覽器都有這個功能。那時人們剛剛接觸移動端的頁面，不會在意這個300ms的延時問題，可是如今移動端如雨后春筍，用戶對體驗的要求也更高，這300ms帶來的卡頓慢慢變得讓人難以接受。

那么如何解決300ms延遲問題呢？

我們就推薦一種最有效、最方便的解決方案，大家應(yīng)該都用過這個方法，那就是FastClick.js。

FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發(fā)的一個輕量級的庫。FastClick的實現(xiàn)原理是在檢測到touchend事件的時候，會通過DOM自定義事件立即出發(fā)模擬一個click事件，并把瀏覽器在300ms之后的click事件阻止掉。

如何使用FastClick

npm install fastclick -S

如何你是vue項目可以在main.js里面直接引入，當(dāng)然這樣是全局的，如果你需要某個頁面用到，那就單個頁面引入。

//引入
import fastClick from 'fastclick'
//初始化FastClick實例。在頁面的DOM文檔加載完成后
fastClick.attach(document.body)

如果你用過FastClick在移動端，就會發(fā)現(xiàn)有一個體驗很不好的問題，某些ios上，點擊輸入框想喚啟軟鍵盤，觸點不是很靈敏，必須重壓或長按才能成功喚啟，快速點擊是不會喚啟軟鍵盤的。

如何解決ios input框喚啟軟鍵盤不靈敏問題？

/**
  * @param {EventTarget|Element} targetElement
  */
FastClick.prototype.focus = function(targetElement) {
  var length;
  // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
      length = targetElement.value.length;
      targetElement.focus();// 加入這一句話
      targetElement.setSelectionRange(length, length);
  } else {
      targetElement.focus();
  }
};

你可以直接去node_module里找到fastClick文件修改focus方法，但是不建議這樣做。如果以后npm install，就會被覆蓋。

建議你在引用fastclick的地方，重寫focus方法。如vue項目，你可以在main.js文件里面，引入fastclick模塊后，重寫focus方法。