美文网首页
ios11.3下fastClick相关bug

ios11.3下fastClick相关bug

作者: 发发呆哟 | 来源:发表于2018-09-19 19:17 被阅读67次

    首先了解一下加入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

          本文链接:https://www.haomeiwen.com/subject/vyqwnftx.html