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

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

理想情况下,我会使用:

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

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

补救方法是使用touchstart:

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

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

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

附录:

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

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

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

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

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


当前回答

我相信现在最好的做法是:

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

触端

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

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


mouseup

当鼠标指针在元素上时,mouseup事件被发送给元素,并且鼠标按钮被释放。任何HTML元素都可以接收这个事件。

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

例子

$('#click').on('mouseup', function () { alert('Event detection'); }); $('#touch').on('touchend', function () { alert('Event detection '); }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <h1 id=“点击”>点击我</h1> <h1 id=“触摸”>触摸我</h1>


编辑(2017)

截至2017年,以Chrome为首的浏览器正在采取措施,通过消除点击请求上的点击事件产生的延迟,使点击事件.on(“点击”)对鼠标和触摸更加兼容。

由此得出的结论是,回到只使用单击事件将是最简单的解决方案。

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

其他回答

你可以尝试这样做:

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

我也在开发Android/iPad web应用,似乎只要使用“touchmove”就足以“移动组件”(不需要touchstart)。 通过禁用touchstart,你可以使用.click();从jQuery。它实际上在工作,因为它没有被touchstart重载。

最后,你可以binb .live("touchstart", function(e) {e.s stoppropagation ();});要让touchstart事件停止传播,living room需要单击()来触发。

这对我很管用。

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

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

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

如果你正在使用jQuery,下面的工作对我来说很好:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

其他解决方案也很好,但我在一个循环中绑定多个事件,需要自调用函数来创建适当的闭包。此外,我不想禁用绑定,因为我希望它可以在下次单击/触摸启动时调用。

可能会帮助到有类似情况的人!