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