JavaScript中的触摸事件执行两种不同的操作

Question

由于我遇到了一个非常奇怪的问题，不同的触摸事件库（如hammer.js和quo.js）我决定自己开发我需要的事件。我正在谈论的问题是，如果在我触摸屏幕的位置出现超链接，则触摸会被识别两次。这种情况发生在iOS和Android上。

想象一下网页上的一个元素，如果你触摸它，它会直观地改变屏幕内容。如果新页面在我触摸屏幕的同一位置显示了超链接（<a href="">），那么新的超链接也会被触发。

现在我开发了自己的实现，我注意到：我遇到了同样的问题！现在的问题是：为什么？

我所做的是以下（是的，我正在使用jQuery）：

（请参阅下面的＃1源代码）

• 此功能仅用于某些特殊元素，而不是超链接。所以超链接仍然具有默认行为。
• 问题只会影响超链接。它不会出现在使用上面显示的事件方法的其他元素上。

所以我可以想象，在我触摸的同一个元素上没有触发点击事件，但是在触摸事件处理后触摸屏幕的同一点上执行了点击“动作”。至少这是它的感觉。因为我只抓住我实际触摸的元素上的click事件，所以我没有抓住超链接上的click事件 - 实际上这不是必需的。

有谁知道造成这种行为的原因是什么？

---

完整源代码

＃1 - 将元素附加到元素

$elements是$（selector）返回的jQuery对象;
callback是在检测到点按时应调用的函数

helper.registerTapEvent = function($elements, callback) {
    var touchInfo = {
        maxTouches: 0
    };

    function evaluate(oe) {
        var isSingleTouch = touchInfo.maxTouches === 1,

        positionDifferenceX = Math.abs(touchInfo.startX - touchInfo.endX),
        positionDifferenceY = Math.abs(touchInfo.startY - touchInfo.endY),
        isAlmostSamePosition = positionDifferenceX < 15 && positionDifferenceY < 15,

        timeDifference = touchInfo.endTime - touchInfo.startTime,
        isShortTap = timeDifference < 350;

        if (isSingleTouch && isAlmostSamePosition && isShortTap) {
            if (typeof callback === 'function') callback(oe);
        }
    }

    $elements
    .on('touchstart', function(e) {
        var oe = e.originalEvent;

        touchInfo.startTime = oe.timeStamp;
        touchInfo.startX = oe.changedTouches.item(0).clientX;
        touchInfo.startY = oe.changedTouches.item(0).clientY;
        touchInfo.maxTouches = oe.changedTouches.length > touchInfo.maxTouches ? oe.touches.length : touchInfo.maxTouches;
    })
    .on('touchend', function(e) {
        var oe = e.originalEvent;

        oe.preventDefault();

        touchInfo.endTime = oe.timeStamp;
        touchInfo.endX = oe.changedTouches.item(0).clientX;
        touchInfo.endY = oe.changedTouches.item(0).clientY;

        if (oe.touches.length === 0) {
            evaluate(oe);
        }
    })
    .on('click', function(e) {
        var oe = e.originalEvent;

        oe.preventDefault();
    });
}

＃2 - 页面转换完成的部分

$subPageElem是应该显示的页面的jQuery对象 $subPageElem.prev()返回当新页面显示时（暂时）隐藏的当前页面元素。

$subPageElem.css({
    webkitTransform: 'translate3d(0,0,0)',
    transform: 'translate3d(0,0,0)'
}).prev().css({
    webkitTransform: 'translate3d(-5%,0,-100px)',
    transform: 'translate3d(-5%,0,-100px)'
});

我还应该提到新页面$subPageElem是动态生成的并插入到DOM中。 I. e。当我触摸/释放屏幕时，触发（但不应该）的链接甚至不存在于DOM中。