代码之家 › 专栏 › 技术社区 › shifu

检测刷卡而不影响点击事件

jquery javascript

shifu · 技术社区 · 8 年前

我做了一些与刷卡功能相关的文章,发现了一个有用的功能,但它也会影响点击事件。

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

有没有办法调整它,使点击事件工作。

这是样品小提琴 http://jsfiddle.net/8rscLo1z/4/

刷卡触发:

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');
});

1 回复 | 直到 8 年前

user10218067 user10218067 8 年前

在您的touchend事件侦听器上,var distX与触摸(swipe)所走的距离有关。您可以添加其他 if条件

从以下位置更新代码:

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