我正在开发一个需要在多种设备上运行的移动网站。目前让我头疼的是黑莓手机。
我们需要同时支持键盘点击和触摸事件。
理想情况下，我会使用:
$thing.click(function(){...})
但我们遇到的问题是，一些黑莓设备从触摸到触发点击有一个非常恼人的延迟。
补救方法是使用touchstart:
$thing.bind('touchstart', function(event){...})
但是如何绑定两个事件，但只触发一个事件呢?对于键盘设备，我仍然需要click事件，但当然，如果我使用的是触摸设备，我不想让click事件触发。
一个额外的问题:有没有办法做到这一点，并额外适应那些甚至没有touchstart事件的浏览器?在研究中，看起来黑莓OS5不支持touchstart，因此也需要依赖于该浏览器的点击事件。
附录:
也许一个更全面的问题是:
使用jQuery，是否可能/建议使用相同的绑定同时处理触摸交互和鼠标交互?
理想情况下，答案是肯定的。如果不是，我确实有一些选择:
我们使用WURFL来获取设备信息，这样就可以创建我们自己的设备矩阵。根据设备的不同，我们将使用touchstart或click。
通过JS检测浏览器中的触摸支持(我需要做更多的研究，但这似乎是可行的)。
然而，还有一个问题:支持这两种功能的设备怎么办?我们支持的一些手机(即诺基亚和黑莓)既有触摸屏又有键盘。这让我又回到了最初的问题……有没有一种方法可以同时兼顾两者?
我不得不做一些类似的事情。下面是一个对我有用的简化版本。如果检测到触摸事件，则删除单击绑定。
$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
});
我不得不做一些类似的事情。下面是一个对我有用的简化版本。如果检测到触摸事件，则删除单击绑定。
$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
});
一般来说，你不希望混合默认的触摸和非触摸(点击)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
}
}
