如何绑定“touchstart”和“点击”事件，但不响应两者？ [英] How to bind 'touchstart' and 'click' events but not respond to both?

问题描述

我正在使用一个必须在各种设备上工作的移动网站。

I'm working on a mobile web site that has to work on a variety of devices. The one's giving me a headache at the moment are BlackBerry.

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

We need to support both keyboard clicks as well as touch events.

理想情况下，我只需使用：

Ideally I'd just use:

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

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

but the issue we're running into is that some of these blackberry devices have an very annoying delay from the time of the touch to it triggering a click.

解决方法是改用touchstart：

The remedy is to instead use touchstart:

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

关于绑定这两个事件，但只发射一个？我仍需要键盘设备的点击事件，但是如果我使用触摸设备，当然不希望点击事件触发。

But how do I go about binding both events, but only firing one? I still need the click event for keyboard devices, but of course, don't want the click event firing if I'm using a touch device.

一个额外的问题：有没有反正做到这一点，另外还适应甚至没有touchstart事件的浏览器？在研究这一点，看起来BlackBerry OS5不支持touchstart，所以也需要依赖于该浏览器的点击事件。

A bonus question: Is there anyway to do this and additionally accommodate browsers that don't even have a touchstart event? In researching this, it looks like BlackBerry OS5 doesn't support touchstart so will also need to rely on click events for that browser.

ADDENDUM：

也许更全面的问题是：

使用jQuery，是否可以/推荐使用相同的绑定来处理触摸交互和鼠标交互？

With jQuery, is it possible/recommended to handle both touch interactions and mouse interactions with the same bindings?

理想情况下，答案是肯定的。如果没有，我有一些选项：

Ideally, the answer is yes. If not, I do have some options:

1）我们使用WURFL获取设备信息，以便可以创建自己的设备矩阵。根据设备，我们将使用touchstart或单击。

1) We use WURFL to get device info so could create our own matrix of devices. Depending on the device, we'll use touchstart OR click.

2）通过JS检测浏览器中的触摸支持（我需要做更多的研究，但似乎是可行的）。

2) Detect for touch support in the browser via JS (I need to do some more research on that, but it seems like that is doable).

但是，这仍然有一个问题：那些支持BOTH的设备。我们支持的一些手机（即Nokia和BlackBerries）具有触摸屏和键盘。

However, that still leaves one issue: what about devices that support BOTH. Some of the phones we support (namely the Nokias and BlackBerries) have both touch screens and keyboards. So that kind of takes me full circle back to the original question...is there a way to allow for both at once somehow?

推荐答案

这是一种让我完全回到原始问题的方式。

更新：查看jQuery Pointer Events Polyfill 项目，该项目允许您绑定到指针事件而不是在鼠标和

Update: Check out the jQuery Pointer Events Polyfill project which allows you to bind to "pointer" events instead of choosing between mouse & touch.

绑定到这两者，但是创建一个标志，因此函数只会每100ms左右触发一次。

Bind to both, but make a flag so the function only fires once per 100ms or so.

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

这篇关于如何绑定“touchstart”和“点击”事件，但不响应两者？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！