點透問題及解決

一、問題描述

實際學習與工作中可能會有這樣的需求：在移動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");
        })

當然不是拿來主義，而是充分利用各種工具以提高自己學習和工作的效率。