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

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

理想情况下,我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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


当前回答

我在那里给出了一个答案,我用jsfiddle演示。 您可以检查不同的设备并报告。

基本上,我使用了一种事件锁和一些服务于它的函数:

/*
 * Event lock functions
 * ====================
 */
function getEventLock(evt, key){
   if(typeof(eventLock[key]) == 'undefined'){
      eventLock[key] = {};
      eventLock[key].primary = evt.type;
      return true;
   }
   if(evt.type == eventLock[key].primary)
      return true;
   else
      return false;
}

function primaryEventLock(evt, key){
   eventLock[key].primary = evt.type;
}

然后,在我的事件处理程序中,我从对我的锁的请求开始:

/*
 * Event handlers
 * ==============
 */
$("#add").on("touchstart mousedown", addStart);
$("#add").on("touchend mouseup", addEnd);
function addStart(evt){
   // race condition between 'mousedown' and 'touchstart'
   if(!getEventLock(evt, 'add'))
      return;

   // some logic
   now = new Date().getTime();
   press = -defaults.pressDelay;
   task();

   // enable event lock and(?) event repetition
   pids.add = setTimeout(closure, defaults.pressDelay);

   function closure(){
        // some logic(?): comment out to disable repetition
      task();

      // set primary input device
      primaryEventLock(evt, 'add');

      // enable event repetition
      pids.add = setTimeout(closure, defaults.pressDelay);
   }
}
function addEnd(evt){
      clearTimeout(pids.add);
}

我必须强调的是,问题不在于简单地对一个事件做出回应,而在于对两个事件都不做出回应。

最后,在jsfiddle中有一个更新版本的链接,我通过在事件开始和结束处理程序中添加一个对事件锁库的简单调用以及2个范围变量eventLock和eventLockDelay,将对现有代码的影响最小化。

其他回答

我不得不做一些类似的事情。下面是一个对我有用的简化版本。如果检测到触摸事件,则删除单击绑定。

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

在我的例子中,点击事件被绑定到<a>元素,所以我必须删除点击绑定并重新绑定点击事件,这阻止了<a>元素的默认操作。

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

我也在开发Android/iPad web应用,似乎只要使用“touchmove”就足以“移动组件”(不需要touchstart)。 通过禁用touchstart,你可以使用.click();从jQuery。它实际上在工作,因为它没有被touchstart重载。

最后,你可以binb .live("touchstart", function(e) {e.s stoppropagation ();});要让touchstart事件停止传播,living room需要单击()来触发。

这对我很管用。

如果你正在使用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));

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

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

我不确定这是否适用于所有浏览器和设备。 我使用谷歌Chrome和Safari iOS进行了测试。

$thing.on('click || touchend', function(e){

});

OR操作数应该只触发第一个事件(在桌面上应该是click,在iPhone上应该是touchend)。

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

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

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