如何绑定'touchstart'和'click'事件但不回复两者？

Question

我正在开发一个必须在各种设备上运行的移动网站.黑莓手机让我头疼的是黑莓.

我们需要支持键盘点击和触摸事件.

理想情况下,我只是使用:

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

但我们遇到的问题是,这些黑莓设备中的一些从触摸到触发点击时会有非常烦人的延迟.

解决方法是改为使用touchstart:

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

但是,如何绑定这两个事件,但只触发一个？我仍然需要键盘设备的click事件,但当然,如果我使用触摸设备,则不希望点击事件触发.

一个额外的问题:是否有这样做,另外还适用于甚至没有touchstart事件的浏览器？在研究这个问题时,看起来BlackBerry OS5不支持touchstart,因此还需要依赖该浏览器的点击事件.

附录:

也许更全面的问题是:

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

理想情况下,答案是肯定的.如果没有,我有一些选择:

1)我们使用WURFL获取设备信息,因此可以创建我们自己的设备矩阵.根据设备的不同,我们将使用touchstart或点击.

2)通过JS检测浏览器中的触摸支持(我需要对此进行更多的研究,但似乎这是可行的).

但是,这仍然存在一个问题:支持BOTH的设备如何.我们支持的一些手机(即Nokias和黑莓手机)同时具有触摸屏和键盘.所以这种方式让我完全回到原来的问题......是否有办法允许两者同时以某种方式？

Answer 1

更新:查看jQuery 指针事件Polyfill项目,该项目允许您绑定到"指针"事件,而不是在鼠标和触摸之间进行选择.

绑定到两者,但制作一个标志,以便该功能每100ms左右才会触发一次.

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

  return false
});

Answer 2

这是我"创建"的修复程序,它取出了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

});

Answer 3

你可以尝试这样的事情:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

Answer 4

通常这也适用:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

Answer 5

只需return false;在on("click touchstart")事件结束时添加功能即可解决此问题.

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

来自.on()上的jQuery文档

false从事件处理程序返回将自动调用event.stopPropagation()和event.preventDefault().false也可以为处理程序传递一个值作为简写function(){ return false; }.

Answer 6

我不得不做类似的事情.这是对我有用的简化版本.如果检测到触摸事件,请删除单击绑定.

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

  //your code here
});

在我的例子中,click事件被绑定到一个<a>元素,所以我不得不删除click绑定并重新绑定一个click事件,该事件阻止了该<a>元素的默认操作.

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

  //your code here
});

Answer 7

我通过以下方式取得了成功.

十分简单...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

Answer 8

我相信最好的做法是现在使用：

$('#object').on('touchend mouseup', function () { });

触摸端

当触摸点从触摸表面上移除时会触发 touchend 事件。

touchend 事件不会触发任何鼠标事件。

鼠标向上

当鼠标指针悬停在元素上并释放鼠标按钮时，mouseup 事件被发送到元素。任何 HTML 元素都可以接收此事件。

mouseup 事件不会触发任何触摸事件。

例子

$('#object').on('touchend mouseup', function () { });

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

编辑 (2017)

截至 2017 年，从 Chrome 开始的浏览器正在采取措施，.on("click")通过消除点击请求上的点击事件产生的延迟，使点击事件对鼠标和触摸更兼容。

这得出的结论是，恢复到仅使用点击事件将是最简单的解决方案。

我还没有做过任何跨浏览器测试，看看这是否可行。