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

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

理想情况下,我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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


当前回答

如果您已经在使用jQuery,有两种方法来处理这个问题,它们都非常简短。我认为它不需要像大多数答案那么复杂……

返回错误;

只需监听任何/所有事件,并在最后添加“return false;”以停止额外的重复事件处理。

thing$.on('click touchend',function(){
    // do Stuff
    return false; // stop
});

可重复使用的例子:

function bindClickAndTouchEvent(__targets$, __eventHandler){
    
    __targets$.on('click touchend',function(){
        __eventHandler.apply(this,arguments);// send original event
        return false;// but stop additional events
    });
}

// In-Line Usage:

bindClickAndTouchEvents( $('#some-element-id'), function(){ 
    console.log('Hey look only one click even when using touch on a touchscreen laptop') 
});

鼠标向上和触摸结束

根据您的用例,您可能只使用mouseup和touchend,因为这两个事件完全不重叠,只创建一个事件开始…然后你甚至不需要“return false;”。

thing$.on('mouseup touchend',function(){
    // do Stuff
});

其他回答

这是修复,我“创建”,它拿出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

});

一般来说,你不希望混合默认的触摸和非触摸(点击)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
     }
}

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

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

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

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

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

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

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

});

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