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

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

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

理想情况下，我会使用:

$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

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

2012-07-18 14:29:40

其他回答

另一种更好维护的实现。然而，这种技术也会做事件。stopPropagation()。在100毫秒内，没有捕捉到任何其他元素的单击。

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

2012-04-28 14:33:17

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

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

2013-12-18 12:07:03

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

 $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

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

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

});

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

2015-10-27 14:19:35

如果您已经在使用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
});

2021-10-07 19:33:37

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

推荐文章

最新文章

标签