点透 & 解决方案

点透 & 解决方案

学习map:

• 现象：再现现象，总结致使点透出现的状况
• 分析缘由
• 解决办法

现象

再现点透现象请使用一下方式：

1. 手机访问传送门
2. 复制连接到连图生成二维码后扫一扫
3. 或者打开chrome手机视图并打开touch screen。

zepto-隐藏元素-点透

代码：

zepto-最新-没有点透

代码：

原生js-隐藏元素-点透

代码：

原生js-元素出现-点透

代码：

综上，致使点透现象出现的场景：

1. 元素z轴重叠；
2. 绑定了touch事件的元素消失或移走；
3. 绑定有类click事件的元素出如今点击区域；

PS：
a连接的href跳转、input、select等表单元素的聚焦并弹起软键盘，等触发的事件和click同样，因为历史缘由在手机端也会表现出300ms延迟，所以也均可以看作是click事件，我叫他类click事件，demo可用爪机狠戳事件触发顺序&click延迟demo或者复制连接到连图生成二维码后扫一扫。类click事件，也是一种浏览器默认行为，可被event.preventDefault()阻止。

代码：

分析

从事件触发顺序&click延迟demo这个demo能够看出：

• iphone系手机：mouse事件在touchend以后才开始，mouse事件覆盖了click事件，屏蔽了input弹出键盘的默认行为
• 安卓手机：mouse事件会先于touch事件开始，而迟于其结束，mouse事件没有覆盖input的聚焦弹软键盘的浏览器默认行为
• 在ios设备上的浏览器[UC浏览器除外]能明显感觉到click延迟
• 不管是android仍是ios仍是PC的touch screen的click(or mouse)事件都是迟于touchend事件被触发的
• 所以，从手指触摸屏幕到离开屏幕，前后触发了touchstart、touchend、click

因为咱们在touchend阶段z轴层级已经发生了变化，当click被触发时候，可以被点击的元素则是当前z轴离用户最近的层，根据click事件的触发规则：

在被触发时，当前有绑定click事件的元素显示，且在面朝用户的最前端时，才触发click事件

所以touchend以后符合条件的绑定了click事件的元素被点透。

总而言之：出现点透是因为移动端click事件迟于touch事件被触发致使的。

解决办法

不优雅的办法：

1. 对于默认绑定了类click事件的元素（如a、input、select等）

• touchend + preventDefault及时取消touch元素的默认click事件，即if(eve == "touchend") e.preventDefault();。

• 若是牺牲点性能无所谓的话，能够将可能在z轴方向上引发点透现象的元素绑定成click事件，好比遮罩层之类的，不过还能够增长些许有趣的交互抵消用户的焦躁心理，好比：demo-ripple。

2. 对于没有默认绑定类click事件的元素

统一使用touch事件。z轴上都绑定touchstart 和 touchend、 tap不用阻止默认行为也不会穿透。

使用上述方法有很明显的缺点和不方便：

使用touchend + preventDefault要在同一个元素上绑定2个事件，zepto能够封装成tap事件，咱们也能够,自定义tap事件阻止点透

代码：

在本demo中，虽然没有出现点透现象，可是点击出现弹层之后你会发现点击a连接、span、input都没有任何反映了，这是由于在touchend里阻止浏览器默认行为，触发自定义tap事件，不只会阻止掉了input的软键盘弹出，还会阻止一切非tap事件，解决办法就是使用合成的click事件去覆盖会延迟的click事件。

重写click事件

代码：

event.initEvent('click', bubbles, true);

touch_target.addEventListener("click", handle, false);

这样再次点击，弹层上的a连接和span的click事件都响应地很迅速，然而input和select的弹出软键盘的功能被阉割了，实际上input弹出软键盘的事件是focus()事件

3. fastclick

读fastclick源码

layer.removeEventListener('touchend', this.onTouchEnd, false);

FastClick.prototype.onTouchEnd = function(event) {
    ...
    targetTagName = targetElement.tagName.toLowerCase();
    if (targetTagName === 'label') {
        forElement = this.findControl(targetElement);
        if (forElement) {
            this.focus(targetElement);
            if (deviceIsAndroid) {
                return false;
            }

            targetElement = forElement;
        }
    } else if (this.needsFocus(targetElement)) {

        if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
            this.targetElement = null;
            return false;
        }

        this.focus(targetElement);
        this.sendClick(targetElement, event);

        if (!deviceIsIOS || targetTagName !== 'select') {
            this.targetElement = null;
            event.preventDefault();
        }

        return false;
    }
    
// needsFocus
FastClick.prototype.needsFocus = function(target) {
    switch (target.nodeName.toLowerCase()) {
    case 'textarea':
        return true;
    case 'select':
        return !deviceIsAndroid;
    case 'input':
        switch (target.type) {
        case 'button':
        case 'checkbox':
        case 'file':
        case 'image':
        case 'radio':
        case 'submit':
            return false;
        }

        // No point in attempting to focus disabled inputs
        return !target.disabled && !target.readOnly;
    default:
        return (/\bneedsfocus\b/).test(target.className);
    }
};
// sendClick 
FastClick.prototype.sendClick = function(targetElement, event) {
    var clickEvent, touch;

    // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
    if (document.activeElement && document.activeElement !== targetElement) {
        document.activeElement.blur();
    }

    touch = event.changedTouches[0];

    // Synthesise a click event, with an extra attribute so it can be tracked
    clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
    clickEvent.forwardedTouchEvent = true;
    targetElement.dispatchEvent(clickEvent);
};

上面代码的意思就是:在目标元素上绑定touchend事件，在事件处理函数里，若是是须要focus的表单元素被点击，则先触发他们的focus事件，再触发自定义的click事件，fastclick之因此大，就是由于对不少表单元素在各个系统的各个版本的不一样表现作了兼容，不只解决了click以及类click的延迟问题，并且当检测到当前页面使用了基于 <meta> 标签或者 touch-action 属性的解决方案时，会静默退出。能够说，这是真正的跨平台方案出来以前一种很好的变通方案。而zepto 只是为普通的点击事件封装了一个更快的tap事件，类click事件的延迟问题并无获得解决，并且移动端使用的tap事件，若是没作设备判断兼容PC的话，PC端的点击事件将得不到响应，这会很影响网站的可用性和可访问性。不过zepto封装了一系列移动端很须要的功能，好比swipeLeft、swipeRight、swipeUp、等等，两者各有春秋，兼并二者优点的库我目前没遇到，不过能够尝试本身写一个,加个todo吧。

4. tap.js

tap.js源码只有不到200行，大体看了下，并不能解决类click的延迟问题，鸡肋！