Question

我有一个mouseover和mouseout事件连接到某些图片链接，点击事件触发了我网站上的弹出窗口。当使用智能手机时，这给了我一个我想删除的额外点击，我找到了添加.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/

意外火灾点击touchend

1 个答案: