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

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

理想情况下,我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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


当前回答

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

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

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

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

其他回答

利用点击总是会在触摸事件之后发生的事实,以下是我在不使用超时或全局标志的情况下消除“幽灵点击”的方法。

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

基本上,只要在元素上触发ontouchstart事件,就会设置一个标记,然后在点击到来时删除(并忽略)。

这是修复,我“创建”,它拿出GhostClick和实现FastClick。你自己试试,让我们知道它是否对你有效。

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

编辑:我之前的答案(基于这篇文章中的答案)并不适合我。我想要一个子菜单展开鼠标进入或触摸点击和折叠鼠标离开或另一次触摸点击。由于鼠标事件通常是在触摸事件之后触发的,因此编写同时支持触摸屏和鼠标输入的事件侦听器有点棘手。

jQuery插件:触摸或鼠标

我最终写了一个jQuery插件“Touch Or Mouse”(压缩897字节),可以检测一个事件是由触摸屏还是鼠标调用的(不需要测试触摸支持!)这样可以同时支持触摸屏和鼠标,并完全分离它们的事件。

通过这种方式,OP可以使用touchstart或touchend来快速响应触摸单击,并使用click来响应仅由鼠标调用的单击。

示范

第一个是ie。body元素跟踪触摸事件:

$(document.body).touchOrMouse('init');

鼠标事件以默认方式和调用$body来绑定元素。touchOrMouse('get', e)我们可以发现事件是由触摸屏还是鼠标调用的。

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

查看插件在http://jsfiddle.net/lmeurs/uo4069nh上的工作。

解释

This plugin needs to be called on ie. the body element to track touchstart and touchend events, this way the touchend event does not have to be fired on the trigger element (ie. a link or button). Between these two touch events this plugin considers any mouse event to be invoked by touch. Mouse events are fired only after touchend, when a mouse event is being fired within the ghostEventDelay (option, 1000ms by default) after touchend, this plugin considers the mouse event to be invoked by touch. When clicking on an element using a touchscreen, the element gains the :active state. The mouseleave event is only fired after the element loses this state by ie. clicking on another element. Since this could be seconds (or minutes!) after the mouseenter event has been fired, this plugin keeps track of an element's last mouseenter event: if the last mouseenter event was invoked by touch, the following mouseleave event is also considered to be invoked by touch.

你可以使用一个计数器来代替超时:

var count = 0;
$thing.bind('touchstart click', function(){
  count++;
  if (count %2 == 0) { //count 2% gives the remaining counts when devided by 2
    // do something
  }

  return false
});

我刚刚想出了一个想法,记住如果ontouchstart被触发。在本例中,我们在支持onclick事件的设备上,并希望忽略onclick事件。因为ontouchstart应该总是在onclick之前被触发,我使用这个:

<脚本> touchAvailable = false;> < /脚本 <按钮ontouchstart = " touchAvailable = true;myFunction();" onclick="if(!touchAvailable);按钮“>按钮< / >