解决iPhone的click延迟

上次我通过监控click的触发时间来判断是否双击后,在ipad上测试是已经解决了的,但是iPhone上居然又不行了,他需要点击三次才会触发双击事件,按道理,判断时间是没有问题的,400ms也刚刚好,于是又去研究.

同事告诉我说苹果的会有click延迟,为此我测试了一下,点击一下,然后等久一点点再点击,也能触发双击,但是这个一点点的时间肯定是超过了400ms,只能说首次的click被延迟执行了.

具体为什么要这样做,估计是要和ios系统本身的双击放大有关系的,反正dblclick完全不触发的,无奈又要去找解决方案.

于是就找到了FastClick,他是一个在github上发布的轻量级解决方案,引入这个js文件,然后在页面加载完毕后给body元素加上这个方法就行.

FastClick下载

在lib文件夹中就有这个fastclick.js文件,拿到后我们引入,然后js判断文档加载好了就触发:

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

如果是jq的话可以这样写:

$(function() {
    FastClick.attach(document.body);
});

根据不同的环境也有很多种引入调用方式,具体自行查看github官方说明,我这里就说一下我在vue环境下的使用.

node下是可以直接安装的,配合vue cli的环境,输入以下代码进行安装

npm install fastclick -S

安装完在需要调用该方法的文件内引入:

import fastClick from 'fastclick'

引入后进行触发,我们在vue的生命周期created或者mounted这两个周期内使用以下代码:

fastClick.attach(document.body)

然后就可以了,之前的判断是不是双击事件也不需要改动什么,问题解决.

官方还推荐使用meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1">

这个大概意思就是禁止双击放大啥的,反正一般来说,初始化项目或者编写html都会有这个东西,内容有就行了.

然后说一下问题,就是谷歌浏览器会在控制台疯狂提示:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

提示你无法处理被动的click事件,反正这个东西也不影响使用,手机端也看不到,目前也找不到去除的方法,暂时就这样挂着吧!

input触发软键盘不灵敏

今天终于碰到了这个fastclick引起的input元素点击失效的情况,百度了半天终于知道怎么修复了,就是将之前的方法写到这个fastclick中去,问题修复,因为改动了这个js文件,所以npm安装的方式就不行了,只能script引入这个静态文件,并且在vue-cli中也只能在index中加入.

在引入的fastclick.js文件的自运行函数里,在最末尾最后一个方法前加入以下方法,就可以修复了.

//修复ios端input点击无效
    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') {
            length = targetElement.value.length;
            targetElement.focus();
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

奇葩问题

同事在测试其他元素的click事件时，有的click需要两次才触发，它的函数结构是这样的，首先是一个click事件触发一个open方法，这个方法里在手动触发其他元素的click事件，比如button.click()这种，找了半天发现官方也有提供一个方式，目前问题已经解决，就是在对应的元素上添加一个class名称：

<a class="needsclick">Ignored by FastClick</a>

添加needsclick即可解决