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

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

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

理想情况下，我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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

当前回答

更新:查看jQuery指针事件Polyfill项目，它允许您绑定到“指针”事件，而不是在鼠标和触摸之间选择。

绑定到两者，但要做一个标记，以便函数每100ms左右只触发一次。

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

  return false
});

2011-08-11 00:14:42

其他回答

这对我来说很有效，手机会同时监听两个，所以要防止触摸事件。桌面只听鼠标。

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

2015-12-04 09:57:36

只要加上return false;末尾的on(“点击touchstart”)事件函数可以解决这个问题。

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

来自jQuery文档。on()

从事件处理程序返回false将自动调用event. stoppropagation()和event. preventdefault()。false值也可以作为function(){return false;}。

2016-04-06 13:20:14

你可以尝试这样做:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

2011-09-23 14:21:26

为事件赋值'touchstart mousedown'或'touchend mouseup'可能会很有效，以避免使用click所产生的不必要的副作用。

2012-11-16 23:50:00

尝试使用虚拟鼠标(vmouse)绑定从jQuery移动。这是针对你的案例的虚拟事件:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

浏览器支持列表:http://jquerymobile.com/browser-support/1.4/

2015-02-16 12:59:22

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

推荐文章

最新文章

标签