点透问题及解决

一、问题描述

实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。

二、例子

下面通过多种方式来模拟感受点透：

<div class="tap">tap</div>
<div class="click">click</div>

1、使用原生js

直接给两个盒子绑定点击事件：

    var tap = document.querySelector('.tap');
    var click = document.querySelector('.click'); 
    //一、为tap添加touch事件  touch事件只是针对移动端，pc端无效
    tap.addEventListener('touchstart',function(e) {
        tap.style.visibility = "hidden";
    });
    click.addEventListener('click',function(e) {
        click.style.backgroundColor = "blue";
    })

在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。

一、问题描述

实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。

二、例子

下面通过多种方式来模拟感受点透：

<div class="tap">tap</div>
<div class="click">click</div>

1、使用原生js

直接给两个盒子绑定点击事件：

    var tap = document.querySelector('.tap');
    var click = document.querySelector('.click'); 
    //一、为tap添加touch事件  touch事件只是针对移动端，pc端无效
    tap.addEventListener('touchstart',function(e) {
        tap.style.visibility = "hidden";
    });
    click.addEventListener('click',function(e) {
        click.style.backgroundColor = "blue";
    })

在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。

问题1：点透

问题2：touch在PC端无效

问题3：click事件在移动端有延迟约300ms的问题（详细见移动端click延迟和tap事件）

2、使用自己封装的tap事件

封装的tap事件代码详见上一篇：移动端click延迟和tap事件

idcast.tap(tap,function(e){
            tap.style.visibility = "hidden";
        })
        idcast.tap(click,function(e) {
            click.style.backgroundColor = "blue";
        })

结果：移动端没有出现点透，但是PC端无效。

问题1：封装的tap事件由touchstart和touchend实现，touch事件在pc端无效

3、使用zepto

$('.tap').on("tap",function() {
            $(this).hide();//zepto中tap事件在touch.js中
        });
        $('.click').on("click",function() {
            $(this).css("backgroundColor","blue");
        })

该版本zepto的点透问题已经解决可以放心使用，但是PC端仍然无效。

三、解决

综合上述：web想同时移动端和PC端呈现，又要解决点透问题，可以直接使用一个fastclick.js插件：fastclick

如下的使用：可以完美解决以上三者问题

if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);//给body绑定attach事件，是body中所有的元素都添加了attach事件
            }, false);
        }
        tap.addEventListener('click',function() {
            $(this).hide();
        })
        click.addEventListener('click',function() {
            $(this).css("backgroundColor","blue");
        })

当然不是拿来主义，而是充分利用各种工具以提高自己学习和工作的效率。