正文 1225字数 89,195阅读

一、点透出现的场景

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

1.A/B两个层上下z轴重叠。

2.上层的A点击后消失或移开。（这一点很重要）

3.B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

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

二、为什么会出现点透

click延迟，延迟，还是延迟。

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：
1.touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发 2.click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发
Run code
Cut to clipboard


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

    由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，根据click事件的触发规则：

    只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件。
    由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。
    三、解决方案

    1.对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

    2.对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件，从而阻止click事件的产生。即应在上例的 handle函数中添加 代码如下：
    if(eve == "touchsend") e.preventDefault();
    Run code
    Cut to clipboard

      3.对于遮盖浮层，由于遮盖浮层的点击即使有小延迟也是没有关系的，反而会有疑似更好的用户体验，所以这种情况，可以针对遮盖浮层自己采用click事件，这样就不会出现点透问题。

      PC端不支持touch事件

      四、现有解决方案框架（库）

      1. 众所周知，zepto的tap事件是有点透问题的，但是最新版的zepto已经修复了这个问题。

      2. 在zepto修复问题之前，有fastclick、hammer等通用库可以使用。
      转载自：http://www.tuicool.com/articles/q2YnUza
      Run code
      Cut to clipboard