ios11.3下fastClick相关bug

首先了解一下加入faskclick这个库解决的问题：

click 300ms延迟：浏览器click会比touch延迟300ms触发
click穿透现象：当两个div同处一个position，上层div绑定touch，下层div绑定click,当上层div触发touch消失后，可能会触发下层div的click事件

bug描述：在页面浮层中，存在输入框，在使用fastClick后，导致输入框难以focus

解决方案：

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

FastClick.prototype.focus = function(targetElement) {
    var length;
    //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
    //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用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);
        /*修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘*/
        targetElement.focus();
    } else {
        targetElement.focus();
    }
};

export default FastClick

参考资料：iOS11.3 fastclick.js相关bug剖析

ios11.3下fastClick相关bug

推荐阅读更多精彩内容