使用 touchend 意外触发点击

Question

我有一个 mouseover 和 mouseout 事件连接到一些带有 click 事件的图像链接，该事件会在我的网站上触发一个弹出窗口。使用智能手机时，这给了我一个额外的点击，我想删除它，我找到了添加 .on 和 touchend 的解决方案，问题似乎已经解决，但现在我意识到，当我尝试滚动时，我不小心点击了imageLink 一直和弹出窗口触发。对于简单的解决方案有什么建议吗？

Javascript

$('.ImageLink').on('click touchend', function (e) {
                        e.preventDefault();

...popup function

Answer 1

在 touchstart 时，将触摸事件的 Y 位置存储在变量中。
在 touchend 上，将触摸事件的 Y 位置与您存储的 Y 位置进行比较。
如果两者之间的差异小于 X，请执行弹出功能。
如果两者之间的距离大于X，则说明它是一个卷轴，不要做任何事情。

Javascript

var startY,endY, deltaY;

$('.ImageLink')[0].addEventListener('touchstart', handleTouchStart, false);
$('.ImageLink')[0].addEventListener('touchmove', handleTouchMove, false);
$('.ImageLink')[0].addEventListener('touchend', handleTouchEnd, false);

function handleTouchStart(e) {
    if (e.touches.length == 1) {
        var touch = e.touches[0];
        startY = touch.pageY;
        deltaY = 0;
    }
}

function handleTouchMove(e) {
    if (e.touches.length == 1) {
        var touch = e.touches[0];
        endY = touch.pageY;
        deltaY = endY - startY;
    }
}

function handleTouchEnd(e) {
    if (e.touches.length == 0) { // User just took last finger off screen
        if (Math.abs(deltaY) < 40) { // User didn't move finger much up or down
            alert('Popup code here')
        } else {
            alert('Do nothing')
        }
    }
}

演示：http://jsfiddle.net/4hmhs/