移动端事件点透

事件点透

当我们有一个遮罩，遮罩下面有一个 a 标签，当我们点击遮罩，当遮罩消失，a 标签也会相应点击跳转。

事件问题

1. PC 端事件可以在移动端触发。 移动端不会在 PC 端触发。

2. PC 端事件有 300 毫秒的延迟。

3. 移动端事件不会有延迟。

这就是造成点击遮罩之后，触发 touchstart 事件，遮罩消失，然后等了 300毫秒之后，会点击 a 标签，进行跳转。

怎么防止点透问题。

重写 a 标签跳转功能。

var aNodes = document.querySelectorAll('a');
for (var i = 0; i < aNodes.length; i++) {
    aNodes[i].addEventListener('touchstart', function() {
        this.isMove = false;
    })

    aNodes[i].addEventListener('touchmove', function () {
        this.isMoved = true;
    })

    aNodes[i].addEventListener('touchend', function () {
        if (!this.isMoved) {
            window.location.href = this.href;
        }
    })
} 

注意：需要加一个开关，不然的话，移动的时候，滑动到 a 标签身上就会进行跳转。