完全理解和解决移动WEB开发中CLICK点透问题

在移动WEB开发中，有时候可能会出现点透问题，本文将围绕这个TAP点透问题，详细的讲述到底什么是点透，为何会出现点透，如何避免出现点透，若是不可避免的出现了，如何解决解决移动WEB开发中CLICK点透问题，本文讲的问题只有使用移动端的浏览器才能够发现和解决问题，由于PC的浏览器不知从touch事件。
什么是click点透

如下状况，在B元素上有半透明红色遮盖层A，黄色B元素内有可点击连接C。

完全理解和解决移动WEB开发中CLICK点透问题

在“移动端”，点击事件一般采用touch相关事件来获取高效率。现有需求，点击遮盖层A则隐藏A（点击后隐藏，这一点很重要），则相关javascript代码以下：

var div1 = document.getElementById("div1");
var div2 = document.getElementById('div2');
var con = document.getElementById('console');
function handle(e){var tar = e.target,<br>　　　　　　　　　 eve = e.type;
   var ele = 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区域外点击时是没有任何问题的，页面下方的log记录控制台内会出现以下内容：

target:div1 event:touchstart
target:div2 event:touchend

然而，当在C区域进行点击罩层A的时候，会发现跳到百度页面了，也就是，原本点击A，可是却透过A，点击到了B里的连接！这就是传说中的 click点透。

为了更清楚的看到这个过程，咱们为B绑定click事件，即若是B触发了click事件，那么说明，在A上的点击最终点到了B上。在上面javascript清单上添加一行代码以下：

div2.addEventListener('click',handle);

点击B区域，能够看到页面下方的log记录控制台内出现以下内容：

target:div1 event:touchstart
target:div1 event:touchend
target:div2 event:click

可见，在div1的事件触发完毕后，div2也就是B区域神奇的捕获到了click事件，而事实上咱们只点击了div1。
点透出现的场景

刚才举例说明了什么是点透，其实点透的出现场景能够总结以下：

    A/B两个层上下z轴重叠。
    上层的A点击后消失或移开。（这一点很重要）
    B元素自己有默认click事件（如a标签） 或 B绑定了click事件。

在以上状况下，点击A/B重叠的部分，就会出现点透的现象。
为何会出现点透

click延迟，延迟，仍是延迟。

在移动端不使用click而用touch事件代替触摸是由于click事件有着明显的延迟，具体touchstart与click的区别以下：

    touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能当即触发
    click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指不曾在屏幕上移动（某些<a href=”http://www.it165.net/edu/ewl/” target=”_blank” class=”keylink”>浏览器</a>容许移动一个很是小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

也就是说，事件的触发时间按由早到晚排列为：touchstart 早于 touchend 早于 click。亦即click的触发是有延迟的，这个时间大概在300ms左右。

因为咱们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，可以被点击的元素则是其下的B元素，根据click事件的触发规则：

只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件。

因为B绑定了click事件（或者B自己默认存在click事件），因此B的click事件被触发，产生了点透的状况。
解决方案

对于B元素自己没有默认click事件的状况（无a标签等），应统一使用touch事件，统一代码风格，而且因为click事件在移动端的延迟要大不少，不利于用户体验，因此关于触摸事件应尽可能使用touch相关事件。

对于B元素自己存在默认click事件的状况,应及时取消A元素的默认点击事件，从而阻止click事件的产生。即应在上例的handle函数中添加代码以下：

if(eve == "touchsend") e.preventDefault();

对于遮盖浮层，因为遮盖浮层的点击即便有小延迟也是没有关系的，反而会有疑似更好的用户体验，因此这种状况，能够针对遮盖浮层本身采用click事件，这样就不会出现点透问题。
现有解决方案框架（库）

    众所周知，zepto的tap事件是有点透问题的，可是最新版的zepto已经修复了这个问题。
    在zepto修复问题以前，有fastclick、hammer等通用库可使用。

其中最常使用的仍是fastclick，地址 ：https://github.com/ftlabs/fastclick

 

转载请注明：文章转载自：问说网 » 完全理解和解决移动WEB开发中CLICK点透问题
本文标题：完全理解和解决移动WEB开发中CLICK点透问题
本文地址：http://www.uedsc.com/through-the-click-point-in-the-development-of-web.html