vue.js 使用 fastclick解決移動端(ios)click事件300毫秒延遲方法或者vux UI庫延遲解決方案無效的解決辦法

一.使用npm安裝:

npm install fastclick -S


二.用法:

安裝完以後,可以在在main.js中全局引入,並綁定到body,全局生效。或者在單頁面引入,只針對當前頁面生效

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


三.使用過程中存在的bug:

當使用FastClick 時,input框在ios上點擊輸入調取手機自帶輸入鍵盤不靈敏,有時候甚至點不出來。而安卓上完全沒問題。這個原因是因爲FastClick的點擊穿透。解決方法:

FastClick.prototype.onTouchEnd = function(event) {
    if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "text") {
          event.preventDefault();   
          return false;  
    }
}


此方法暫有問題,修正如下:

// 添加Fastclick移除移動端點擊延遲
import FastClick from 'fastclick'
//FastClick的ios點擊穿透解決方案
FastClick.prototype.focus = function (targetElement) {
    let length;
    if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
        length = targetElement.value.length;
        targetElement.focus();
        targetElement.setSelectionRange(length, length);
    } else {
        targetElement.focus();
    }
};
 
FastClick.attach(document.body)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章