服务购

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

　　初始的代码是这么写的：

　　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事件做了详细的说明，对点击穿透问题也提到了几个方案，可以参考。

　　上面就是小编为大家整理的关于移动web开发之点击穿透的文章，希望对大家有帮助。在实际的操作过程中大家可以根据实际情况进行灵活的调整。了解更多咨询请关注猪八戒网。