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

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

理想情况下,我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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


当前回答

在试图解决这个问题时,有很多事情需要考虑。大多数解决方案要么中断滚动,要么不能正确处理幽灵点击事件。

完整的解决方案请参见https://developers.google.com/mobile/articles/fast_buttons

注意:你不能在每个元素的基础上处理鬼点击事件。延迟的点击是由屏幕位置触发的,所以如果你的触摸事件以某种方式修改了页面,点击事件将被发送到页面的新版本。

其他回答

对于我来说,最好的答案是motie给出的,我只是试图让他的代码更可重用,所以这是我的贡献:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

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

这里有一个简单的方法:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

基本上,您可以将第一个被触发的事件类型保存到附加到根文档的jQuery数据对象中的'trigger'属性中,并且仅当事件类型等于'trigger'中的值时才执行。在触控设备上,事件链可能是“touchstart”后面跟着“click”;然而,“点击”处理程序将不会被执行,因为“点击”与保存在“触发器”(“touchstart”)中的初始事件类型不匹配。

假设,我相信这是一个安全的假设,即你的智能手机不会自发地从触摸设备转变为鼠标设备,否则点击将永远不会注册,因为“触发器”事件类型只保存一次页面加载和“点击”永远不会匹配“touchstart”。

这里有一个你可以玩的代码依赖(试着点击触摸设备上的按钮——应该没有点击延迟):http://codepen.io/thdoan/pen/xVVrOZ

我还实现了一个简单的jQuery插件,通过传递一个选择器字符串来支持jQuery的后代过滤:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

一般来说,你不希望混合默认的触摸和非触摸(点击)api。一旦你进入触控世界,你就更容易处理与触控相关的功能。下面是一些伪代码,它们可以做您想做的事情。

如果你在touchmove事件中连接并跟踪位置,你可以在doTouchLogic函数中添加更多的项目来检测手势和其他东西。

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

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

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

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

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

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

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
});