关于移动端web开发过程中的“点击通过”问题

先说说故事发生的场景，如下图：A是遮罩层，B是普通DOM，C是一个B上的元素，这是链接。场景是点击A，A消失，但是点击C，页面跳转，这显然不是我们想要的~我们监听一下点击事件：vardiv1=document.getElementById("div1");vardiv2=document.getElementById('div2');varcon=document.getElementById('console');functionhandle(e){vartar=e.target,eve=e.type;varele=document.createElement("p");ele.innerHTML="target:"+tar.id+"event:"+eve;con.appendChild(ele);if(tar.id==="div1"){div1.style.display="none";}}div1.addEventListener("touchend",handle);div1.addEventListener("touchstart",handle);只要不点C，一切风平浪静，好像没什么问题，时序如下：target:div1event:touchstarttarget:div2event:touchend但是如果在C处点击A，会发现页面跳转。为了更清楚地看到这个过程，我们给B绑定了点击事件，也就是说，如果B触发了点击事件，那么就意味着点击了A，最终点击了B。在上面的javascript列表中添加一行代码如下：div2.addEventListener('click',handle);点击B区，在页面底部的日志记录控制台可以看到如下内容：，也就是B区，神奇的捕捉到了点击事件，但实际上我们只点击了div1。这就是“点穿”，斗牛过山！出现点穿现象的场景：我只是举个例子来说明什么是点穿。其实point-through的场景可以概括为：A/B层上下z轴重合。上层的A点击后消失或移开。（这个很重要）B元素本身有默认的点击事件（比如标签）或者B绑定了点击事件。以上情况，点击A/B重叠部分，会出现点穿现象。为什么会出现“点进”现象？移动端不使用点击而是使用触摸事件而不是触摸，因为点击事件有明显的延迟。touchstart和click的具体区别如下：touchstart:inthisDOM(orbubblingtothisDOM)上指touchstarts时可以立即触发点击：手指touchstartsonthisDOM(orbubblingtothisDOM),并且手指没有在屏幕上移动（某些浏览器允许非常小的位移值），并且手指在这个dom上离开屏幕，触摸离开屏幕，也就是说事件的触发时间是从早到晚排列的：touchstart早于touchend，早于click。也就是说点击的触发是延迟的，这个时间大概是300ms。由于我们在touchstart阶段隐藏了覆盖层A，当点击被触发时，可以点击的元素就是其下的B元素。由于B绑定了点击事件（或者说B本身默认有点击事件），所以触发了B的点击事件，造成了点透的情况。解决方法对于B元素本身没有默认点击事件（没有a标签等）的情况，统一使用touch事件，代码风格统一，因为移动端点击事件的延迟终端比较大，不利于用户体验，所以关于触摸事件应该尽量使用触摸相关事件。对于B元素本身有默认点击事件的情况，要及时取消A元素的默认点击事件，防止点击事件的产生。即在上例的句柄函数中应增加如下代码：e.preventDefault();