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

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

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

理想情况下，我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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

当前回答

更新:查看jQuery指针事件Polyfill项目，它允许您绑定到“指针”事件，而不是在鼠标和触摸之间选择。

绑定到两者，但要做一个标记，以便函数每100ms左右只触发一次。

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

  return false
});

2011-08-11 00:14:42

其他回答

只要加上return false;末尾的on(“点击touchstart”)事件函数可以解决这个问题。

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

来自jQuery文档。on()

从事件处理程序返回false将自动调用event. stoppropagation()和event. preventdefault()。false值也可以作为function(){return false;}。

2016-04-06 13:20:14

你可以这样尝试:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

2015-08-20 02:34:30

另一种更好维护的实现。然而，这种技术也会做事件。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

为什么不使用jQuery事件API?

http://learn.jquery.com/events/event-extensions/

我成功地使用了这个简单的事件。它干净、可命名且足够灵活，可以继续改进。

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

2013-02-23 14:46:05

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

推荐文章

最新文章

标签