如何绑定“触摸启动”和“点击”事件，但不回应两者?

我正在开发一个需要在多种设备上运行的移动网站。目前让我头疼的是黑莓手机。

我们需要同时支持键盘点击和触摸事件。

理想情况下，我会使用:

$thing.click(function(){...})

但我们遇到的问题是，一些黑莓设备从触摸到触发点击有一个非常恼人的延迟。

补救方法是使用touchstart:

$thing.bind('touchstart', function(event){...})

但是如何绑定两个事件，但只触发一个事件呢?对于键盘设备，我仍然需要click事件，但当然，如果我使用的是触摸设备，我不想让click事件触发。

一个额外的问题:有没有办法做到这一点，并额外适应那些甚至没有touchstart事件的浏览器?在研究中，看起来黑莓OS5不支持touchstart，因此也需要依赖于该浏览器的点击事件。

附录:

也许一个更全面的问题是:

使用jQuery，是否可能/建议使用相同的绑定同时处理触摸交互和鼠标交互?

理想情况下，答案是肯定的。如果不是，我确实有一些选择:

我们使用WURFL来获取设备信息，这样就可以创建我们自己的设备矩阵。根据设备的不同，我们将使用touchstart或click。通过JS检测浏览器中的触摸支持(我需要做更多的研究，但这似乎是可行的)。

然而，还有一个问题:支持这两种功能的设备怎么办?我们支持的一些手机(即诺基亚和黑莓)既有触摸屏又有键盘。这让我又回到了最初的问题……有没有一种方法可以同时兼顾两者?

当前回答

如果你正在使用jQuery，下面的工作对我来说很好:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

其他解决方案也很好，但我在一个循环中绑定多个事件，需要自调用函数来创建适当的闭包。此外，我不想禁用绑定，因为我希望它可以在下次单击/触摸启动时调用。

可能会帮助到有类似情况的人!

2014-02-21 02:46:59

其他回答

在我的案例中，这非常有效:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

主要的问题是，当我尝试点击鼠标时，在触摸设备上同时触发点击和触摸结束，如果我使用点击关闭，一些功能在移动设备上根本不起作用。click的问题是，它是一个全局事件，触发了事件的其余部分，包括touchend。

2017-10-02 14:21:05

嗯…所有这些都非常复杂。

如果你有modernizr，这是很简单的。

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

2014-05-16 04:26:55

通常这样也可以:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

2012-11-03 22:28:22

出于文档的目的，以下是我所能想到的最快/响应最快的桌面点击/移动点击解决方案:

我用一个修改过的函数替换了jQuery的on函数，只要浏览器支持触摸事件，就用touchstart替换了我所有的点击事件。

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

than的用法和以前完全一样，比如:

$('#my-button').on('click', function(){ /* ... */ });

但它会在可用时使用touchstart，在不可用时使用click。不需要任何形式的延误:D

2013-04-25 17:28:17

我相信现在最好的做法是:

$('#object').on('touchend mouseup', function () { });

触端

触摸点从触摸表面移除时触发touchend事件。

touchend事件不会触发任何鼠标事件。

mouseup

当鼠标指针在元素上时，mouseup事件被发送给元素，并且鼠标按钮被释放。任何HTML元素都可以接收这个事件。

mouseup事件不会触发任何触摸事件。

例子

$（'#click'）.on（'mouseup'， function （） { alert（'Event detection'）; }）; $（'#touch'）.on（'touchend'， function （） { alert（'Event detection '）; }）; <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <h1 id=“点击”>点击我</h1> <h1 id=“触摸”>触摸我</h1>

编辑(2017)

截至2017年，以Chrome为首的浏览器正在采取措施，通过消除点击请求上的点击事件产生的延迟，使点击事件.on(“点击”)对鼠标和触摸更加兼容。

由此得出的结论是，回到只使用单击事件将是最简单的解决方案。

我还没有做任何跨浏览器测试，看看这是否可行。

2017-04-21 08:09:40

如何绑定“触摸启动”和“点击”事件，但不回应两者?

推荐文章

最新文章

标签