ios11.3下fastClick相關(guān)bug

首先了解一下加入faskclick這個(gè)庫解決的問題:

  • click 300ms延遲:瀏覽器click會(huì)比touch延遲300ms觸發(fā)
  • click穿透現(xiàn)象:當(dāng)兩個(gè)div同處一個(gè)position,上層div綁定touch,下層div綁定click,當(dāng)上層div觸發(fā)touch消失后,可能會(huì)觸發(fā)下層div的click事件

bug描述:在頁面浮層中,存在輸入框,在使用fastClick后,導(dǎo)致輸入框難以focus

解決方案:

import FastClick from 'fastclick'
import Helper from '@/util/helper'

FastClick.prototype.focus = function(targetElement) {
    var length;
    //兼容處理:在iOS7中,有一些元素(如date、datetime、month等)在setSelectionRange會(huì)出現(xiàn)TypeError
    //這是因?yàn)檫@些元素并沒有selectionStart和selectionEnd的整型數(shù)字屬性,所以一旦引用就會(huì)報(bào)錯(cuò),因此排除這些屬性才使用setSelectionRange方法
    if (Helper.UA.isIos && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
        length = targetElement.value.length;
        targetElement.setSelectionRange(length, length);
        /*修復(fù)bug ios 11.3不彈出鍵盤,這里加上聚焦代碼,讓其強(qiáng)制聚焦彈出鍵盤*/
        targetElement.focus();
    } else {
        targetElement.focus();
    }
};

export default FastClick

參考資料:iOS11.3 fastclick.js相關(guān)bug剖析

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近遇到奇異的bug,在ios 11.3移動(dòng)端頁面 input輸入框第一次觸摸可以彈起鍵盤,后續(xù)再觸摸需要很難彈起...
    邱瘋子閱讀 10,803評論 13 18
  • 相關(guān)知識(shí)點(diǎn) 移動(dòng)端、 適配(兼容)、 ios點(diǎn)擊事件300ms延遲、 點(diǎn)擊穿透、 定位失效...... 問題&解決...
    sandisen閱讀 25,855評論 3 67
  • 移動(dòng)頁面點(diǎn)擊穿透問題解決方案 一.click與300ms延遲 移動(dòng)瀏覽器提供一個(gè)特殊的功能:雙擊(double t...
    程序員之路閱讀 3,936評論 0 2
  • AMD 和 CMD 的區(qū)別有哪些?AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。CMD 是 ...
    竿牘閱讀 750評論 0 1
  • 有點(diǎn)意思,這個(gè)必須轉(zhuǎn)!【精辟得一塌糊涂】 【1歲】我就是不講話,不讓大人們輕易知道我在想什么。哼哼。 ...
    古墓道人閱讀 266評論 0 0

友情鏈接更多精彩內(nèi)容