绑定'touchstart'和'click'时防止鬼点击

Question

我正在开发一个应用程序,在我的桌面和移动设备上进行测试.我正在尝试修复移动设备上的这些慢速按钮,并了解了touchstart和click之间的区别.

所以我用jquery绑定我的按钮来执行touchstart和点击,如下所示:

$('.button').on('touchstart click', function(){
});

现在该应用程序在手机上的表现稍好一些.但是,它正在执行触摸点击,然后定期点击,即可能双击,或者当下一张幻灯片进入时,它会点击那里的某些内容.在我的情况下,表单正在出现,并且选中了单击按钮所在的空间中显示的输入字段.鬼点击.

我怎么能告诉我的功能,如果有触摸,忽略点击？

或者更好的是,有没有办法告诉jquery只是承认所有"点击"的触摸？

我会删除'click'绑定,但是我无法在桌面环境中轻松测试.

Answer 1

如果你想为不同的事件类型使用特定的东西 e.type

$('.button').on('touchstart click', function(e) {    
    e.preventDefault(); //prevent default behavior
    if(e.type == "touchstart") {
        // Handle touchstart event.
    } else if(e.type == "click") {
        // Handle click event.
    }
});

Answer 2

Touchstart应该在点击之前发生,所以如果事件是touchstart类型,我会删除点击处理程序.这似乎很适合我的目的:

$('.do-popdown').on('click touchstart', handlePopdown);
function handlePopdown(e){
    if(e.type == 'touchstart') {
        $('.do-popdown').off('click', handlePopdown).click(function(e){
            // do nothing
            e.stopPropagation();
            e.preventDefault();
            return false;
        });
    }
    // do my handling...
    // and nothing else:
    e.stopPropagation();
    e.preventDefault();
    return false;
}

在e.stopPropagation(); e.preventDefault(); return false;可能是矫枉过正,但我用这个在各种不同的元素(的<a>,<div>,<span>,<button>,&C),这符合我一贯的需求.

编辑:更通用(更好？)的方法是创建类似于熟悉的.click()事件绑定器:

jQuery.fn.extend({
    clickOrTouch: function(handler) {
        return this.each(function() {
            var event = ('ontouchstart' in document) ? 'touchstart' : 'click';
            $(this).on(event, handler);
        });
    }
});

这样,只有适当的事件附加到所选元素.

我想一个更"正确"的名字,.touchstartOrClick()但因为它或多或少是一个替代品,.click()我决定用这个名字开始click.

这可以像使用一样使用.click().例如,放入button一个div并运行:

$('button').clickOrTouch(doSomething);
$('div').clickOrTouch(doSomething);
function doSomething(e) {
    $('body').append(this.tagName + ' ' + e.type + '<br>');
    e.stopPropagation();
}

这将显示"DIV click"或"BUTTON touchstart",具体取决于它是如何触发的.如果在链接上使用此选项,请e.preventDefault()在处理程序中添加(如果需要).