Question

我对与滑动功能有关的其他帖子进行了一些研究，发现了一个有用的功能，但是它也会影响点击事件。

这是我发现对滑动功能有用的链接： http://www.javascriptkit.com/javatutors/touchevents2.shtml

是否有一种方法可以对其进行调整并使点击事件起作用。

这是示例小提琴http://jsfiddle.net/8rscLo1z/4/（请使用chrome中的切换设备工具栏工作）

滑动触发器：

var el = document.getElementById('testing_area');
swipedetect(el, function(swipedir){
    // swipedir contains either "none", "left", "right", "top", or "down"
    if (swipedir =='left'){
        $('#testing_area').html('Swipe LEFT detected');
    } else if (swipedir == 'right'){
        $('#testing_area').html('Swipe RIGHT detected');
    } else {
        $('#testing_area').html('Swipe UNRECOGNIZED');
    }
});

点击事件

$('#testing_area').click(function(){
    alert('test click');
});

Answer 1

在touchend事件侦听器上，var distX与触摸（滑动）所经过的距离有关。您可以添加其他如果条件，它将检查distX是否等于0。

从以下位置更新您的代码：

touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        distX = touchobj.pageX - startX 
        distY = touchobj.pageY - startY
        elapsedTime = new Date().getTime() - startTime 
        if (elapsedTime <= allowedTime){
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ 
                swipedir = (distX < 0)? 'left' : 'right' 
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){
                swipedir = (distY < 0)? 'up' : 'down'
            }
        }
        handleswipe(swipedir)
        e.preventDefault()
    }, false)

进入

touchsurface.addEventListener('touchend', function(e){
        var touchobj = e.changedTouches[0]
        distX = touchobj.pageX - startX 
        distY = touchobj.pageY - startY 
        elapsedTime = new Date().getTime() - startTime 
        if(distX == 0){ 
            alert('test click'); //this is where click event is detected
        } else if (elapsedTime <= allowedTime){ 
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ 
                swipedir = (distX < 0)? 'left' : 'right' 
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ 
                swipedir = (distY < 0)? 'up' : '
            }
        }
        handleswipe(swipedir)
        e.preventDefault()
    }, false)

这是工作中的小提琴：http://jsfiddle.net/8rscLo1z/14/show

检测滑动而不影响点击事件

1 个答案: