如何绑定“touchstart"和“click"事件但不响应两者? [英] 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.

附录:

也许更全面的问题是:

使用 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 或 click.

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).

然而，这仍然留下一个问题:支持两者的设备怎么样.我们支持的一些手机(即诺基亚和黑莓手机)同时具有触摸屏和键盘.所以这让我回到了最初的问题......有没有办法以某种方式同时允许两者?

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 指针事件Polyfill 项目，它允许您绑定到指针"事件，而不是在鼠标和鼠标之间进行选择.触摸.

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

绑定到两者，但制作一个标志，以便该函数每 100 毫秒左右只触发一次.

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"和“click"事件但不响应两者?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！