说说移动端web开发中的点击穿透问题

最近一直在忙于一个无线端的项目，由于之前主要工作都是在桌面端，移动端接触的比较少，所以中间遇到了很多的坑，做一个简单的记录。

问题背景

需求中有这样的一个功能，点击取件信息的时候会弹出一个地址列表的浮层，用户选择地址之后会将具体的地址回填到取件信息当中去。按道理讲，这是一个非常简单的功能，可是在开发过程中却遇到了很多非常诡异的事情。

初始的代码是这么写的：

var pickupInfo = $("#pickupInfo");

pickupInfo.on("tap", function () {

    var addressList = $("#addressList");

    addressList.show();

});  

window.addEventListener("message", function () {

    // 回填地址信息

});

// addressList 是一个浮层

$("#addressList li").on("click", function () {

	// 此处回填地址到取件信息中去

	// 具体方式则是通过iframe的postMessage发送消息，pickupInfo那边接收消息后填充

});

为了更清楚的说明问题，此处删除了很多的业务逻辑。

在测试过程中就发现了一个诡异的问题，在点击pickupInfo的时候，addressList浮层闪了一下就消失了，弹出addressList浮层后立即回填了地址信息。

因为一开始也没有太注意观察，跟代码的过程中发现只要浮层一弹出，pickupInfo那边就立即收到了message事件信息。当时第一反应感觉是地址列表那边出了问题，看了好几遍代码，一直没发现哪里有问题，也跟了几次，每次都是地址列表一弹出就立即触发了click事件。

奇了个怪了！

点击穿透

试着描述了下问题google了一把，可能是描述的不太准确，啥也没搜着。没办法了，瞪大眼睛再操作一遍。这时候奇迹出现了，我发现每次点击pickupInfo，都在选中addressList中相对于屏幕与pickupInfo相同位置的地址。

查看了下事发地点的代码，然后在google中敲下了这几个字“移动端 tap”，一大堆的结果，看了几篇文章，终于找到了问题的答案。

先说说touch事件吧。

我们知道，PC上有鼠标事件，一次点击可以拆分成mousedown > click > mouseup 三步。移动端没有鼠标，但是有类似的触摸事件，用户的一次点击可以分为touchstart > touchmove > touchend。虽然手机上没有mouse事件，但是手机依然可以响应mouse事件，为什么呢？是通过touch事件来模拟的。有人曾经对比测试过手机上和PC上的mouse事件，发现手机上的mouse要慢一些，大概在300m左右。

再说说tap事件。

在PC端，我们经常使用到click事件，对应到移动端，我们使用tap事件。但原生的touch事件本身是没有tap的，也是通过模拟产生的。在Zepto中，如果在touchend事件响应250ms无操作后，会触发singleTap事件。

// trigger single tap after 250ms of inactivity

else {

    touchTimeout = setTimeout(function(){

        touchTimeout = null

        if (touch.el) touch.el.trigger('singleTap')

        touch = {}

    }, 250)

}

至此，点击穿透的原因就明了了。

当pickupInfo监听的tap事件得到响应之后，会立即弹出addressList浮层，此时浏览器还会触发click事件，而此时原来的pickupInfo已经完全被addressList遮罩，所以click事件就被触发在了与pickupInfo相同位置的addressList中对应的区域，也就正好响应了addressList中监听的click事件。

世事奈何如此之巧~

解决方案

问题清楚了，修改方法也就明确了，由于项目还在开发中，个人觉得当前的方案还不是特别好，后续优化后再贴出来。这里贴篇文章，也来说说touch事件与点击穿透问题，里面对touch和tap事件做了详细的说明，对点击穿透问题也提到了几个方案，可以参考。

小结

这两天一直在忙于赶开发进度，对于过程中遇到的一些典型的问题做一些记录，算是一种沉淀吧~~