js绑定事件

1. 一、问题描述

实际学习与工作中可能会有这样的需求：在移动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盒子也被触发改变了背景颜色。