我正在开发一个需要在多种设备上运行的移动网站。目前让我头疼的是黑莓手机。
我们需要同时支持键盘点击和触摸事件。
理想情况下，我会使用:
$thing.click(function(){...})
但我们遇到的问题是，一些黑莓设备从触摸到触发点击有一个非常恼人的延迟。
补救方法是使用touchstart:
$thing.bind('touchstart', function(event){...})
但是如何绑定两个事件，但只触发一个事件呢?对于键盘设备，我仍然需要click事件，但当然，如果我使用的是触摸设备，我不想让click事件触发。
一个额外的问题:有没有办法做到这一点，并额外适应那些甚至没有touchstart事件的浏览器?在研究中，看起来黑莓OS5不支持touchstart，因此也需要依赖于该浏览器的点击事件。
附录:
也许一个更全面的问题是:
使用jQuery，是否可能/建议使用相同的绑定同时处理触摸交互和鼠标交互?
理想情况下，答案是肯定的。如果不是，我确实有一些选择:
我们使用WURFL来获取设备信息，这样就可以创建我们自己的设备矩阵。根据设备的不同，我们将使用touchstart或click。
通过JS检测浏览器中的触摸支持(我需要做更多的研究，但这似乎是可行的)。
然而，还有一个问题:支持这两种功能的设备怎么办?我们支持的一些手机(即诺基亚和黑莓)既有触摸屏又有键盘。这让我又回到了最初的问题……有没有一种方法可以同时兼顾两者?
我正在尝试这个，到目前为止，它是有效的(但我只在Android/Phonegap上，所以买者自负)
function filterEvent( ob, ev ) {
if (ev.type == "touchstart") {
ob.off('click').on('click', function(e){ e.preventDefault(); });
}
}
$('#keypad').on('touchstart click', '.number, .dot', function(event) {
filterEvent( $('#keypad'), event );
console.log( event.type ); // debugging only
... finish handling touch events...
}
我不喜欢的事实是，我重新绑定处理器上的每一个触摸，但所有的事情都认为触摸不会经常发生(在计算机时间!)
我有一个像“#键盘”这样的处理程序，所以有一个简单的函数，让我不用太多的代码就能处理问题，这就是我为什么这样做的原因。
一般来说，你不希望混合默认的触摸和非触摸(点击)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
}
}
