By

Contents
  1. 1. Zepto.js的tap事件穿透

Zepto.js的tap事件穿透

@(博客)[zepto, tap, 穿透]

  • 首先举个例子解释一下什么是tap事件的穿透。
  • 假设有两个position: absolute;的页面，A页面在上，B页面在下，两页面重叠在一起。
  • 假设A页面上有一个Button，同一个位置下，B页面上有个input。
  • 那这个时候，如果点了一下Button，会发现手机的输入法弹出来了，也就是说，input也被点了一下。

  • 以下是引用：

    • Zepto中的tap通过监听绑定在document上的touch事件来完成tap事件的模拟的，是通过事件冒泡实现的。在点击完成时（touchstart / touchend）的tap事件需要冒泡到document上才会触发。而在冒泡到 document之前，手指接触和离开屏幕（touchstart / touchend）是会触发click事件的。
    • 因为click事件有延迟（大概是300ms，为了实现Safari的双击事件的设计），所以在执行完tap事件之后，弹出层立马就隐藏了，此时click事件还在延迟的 300ms 之中。当 300ms 到来的时候，click 到的其实是隐藏元素下方的元素。
    • 如果正下方的元素有绑定 click 事件，此时便会触发，如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框（或是 select / radio / checkbox），点击默认 focus 而弹出输入键盘，也就出现了上面的“点透”现象

  • 我的解决方法是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // click或者touch事件
    var event_start, event_move, event_end;
    if('ontouchstart' in document.documentElement
        || (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints >= 1)) {
        event_start = 'touchstart';
        event_move = 'touchmove';
        event_end = 'touchend';
    } else {
        event_start = 'mousedown';
        event_move = 'mousemove';
        event_mouseup = 'mouseup';
    }
    //绑定事件
    $('#div').on(event_end, function(){...});

参考：https://segmentfault.com/a/1190000003848737

Contents
  1. 1. Zepto.js的tap事件穿透