我正在开发一个需要在多种设备上运行的移动网站。目前让我头疼的是黑莓手机。
我们需要同时支持键盘点击和触摸事件。
理想情况下,我会使用:
$thing.click(function(){...})
但我们遇到的问题是,一些黑莓设备从触摸到触发点击有一个非常恼人的延迟。
补救方法是使用touchstart:
$thing.bind('touchstart', function(event){...})
但是如何绑定两个事件,但只触发一个事件呢?对于键盘设备,我仍然需要click事件,但当然,如果我使用的是触摸设备,我不想让click事件触发。
一个额外的问题:有没有办法做到这一点,并额外适应那些甚至没有touchstart事件的浏览器?在研究中,看起来黑莓OS5不支持touchstart,因此也需要依赖于该浏览器的点击事件。
附录:
也许一个更全面的问题是:
使用jQuery,是否可能/建议使用相同的绑定同时处理触摸交互和鼠标交互?
理想情况下,答案是肯定的。如果不是,我确实有一些选择:
我们使用WURFL来获取设备信息,这样就可以创建我们自己的设备矩阵。根据设备的不同,我们将使用touchstart或click。
通过JS检测浏览器中的触摸支持(我需要做更多的研究,但这似乎是可行的)。
然而,还有一个问题:支持这两种功能的设备怎么办?我们支持的一些手机(即诺基亚和黑莓)既有触摸屏又有键盘。这让我又回到了最初的问题……有没有一种方法可以同时兼顾两者?
这里有一个简单的方法:
// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
if (!$(document).data('trigger')) $(document).data('trigger', e.type);
if (e.type===$(document).data('trigger')) {
// Do your stuff here
}
});
基本上,您可以将第一个被触发的事件类型保存到附加到根文档的jQuery数据对象中的'trigger'属性中,并且仅当事件类型等于'trigger'中的值时才执行。在触控设备上,事件链可能是“touchstart”后面跟着“click”;然而,“点击”处理程序将不会被执行,因为“点击”与保存在“触发器”(“touchstart”)中的初始事件类型不匹配。
假设,我相信这是一个安全的假设,即你的智能手机不会自发地从触摸设备转变为鼠标设备,否则点击将永远不会注册,因为“触发器”事件类型只保存一次页面加载和“点击”永远不会匹配“touchstart”。
这里有一个你可以玩的代码依赖(试着点击触摸设备上的按钮——应该没有点击延迟):http://codepen.io/thdoan/pen/xVVrOZ
我还实现了一个简单的jQuery插件,通过传递一个选择器字符串来支持jQuery的后代过滤:
// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
var selector, handler;
switch (typeof arg1) {
case 'function':
selector = null;
handler = arg1;
break;
case 'string':
selector = arg1;
if (typeof arg2==='function') handler = arg2;
else return;
break;
default:
return;
}
this.on('click touchstart', selector, function(e) {
if (!$(document).data('trigger')) $(document).data('trigger', e.type);
if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
});
};
Codepen: http://codepen.io/thdoan/pen/GZrBdo/
我相信现在最好的做法是:
$('#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(“点击”)对鼠标和触摸更加兼容。
由此得出的结论是,回到只使用单击事件将是最简单的解决方案。
我还没有做任何跨浏览器测试,看看这是否可行。
我发现的最好方法是编写touch事件,并让该事件以编程方式调用正常的click事件。这样你就有了所有正常的点击事件,然后你只需要为所有的触摸事件添加一个事件处理程序。对于每一个你想要使其可触摸的节点,只需向其添加“touchable”类来调用触摸处理程序。用Jquery,它的工作原理是这样的,有一些逻辑,以确保它是一个真正的触摸事件,而不是一个假阳性。
$("body").on("touchstart", ".touchable", function() { //make touchable items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
$(".touchable").on("touchend", function(event) {
var d2 = new Date();
var n2 = d2.getTime();
if (n2 - n1 <= 300) {
$(event.target).trigger("click"); //dont do the action here just call real click handler
}
});
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});
编辑:我之前的答案(基于这篇文章中的答案)并不适合我。我想要一个子菜单展开鼠标进入或触摸点击和折叠鼠标离开或另一次触摸点击。由于鼠标事件通常是在触摸事件之后触发的,因此编写同时支持触摸屏和鼠标输入的事件侦听器有点棘手。
jQuery插件:触摸或鼠标
我最终写了一个jQuery插件“Touch Or Mouse”(压缩897字节),可以检测一个事件是由触摸屏还是鼠标调用的(不需要测试触摸支持!)这样可以同时支持触摸屏和鼠标,并完全分离它们的事件。
通过这种方式,OP可以使用touchstart或touchend来快速响应触摸单击,并使用click来响应仅由鼠标调用的单击。
示范
第一个是ie。body元素跟踪触摸事件:
$(document.body).touchOrMouse('init');
鼠标事件以默认方式和调用$body来绑定元素。touchOrMouse('get', e)我们可以发现事件是由触摸屏还是鼠标调用的。
$('.link').click(function(e) {
var touchOrMouse = $(document.body).touchOrMouse('get', e);
if (touchOrMouse === 'touch') {
// Handle touch click.
}
else if (touchOrMouse === 'mouse') {
// Handle mouse click.
}
}
查看插件在http://jsfiddle.net/lmeurs/uo4069nh上的工作。
解释
This plugin needs to be called on ie. the body element to track touchstart and touchend events, this way the touchend event does not have to be fired on the trigger element (ie. a link or button). Between these two touch events this plugin considers any mouse event to be invoked by touch.
Mouse events are fired only after touchend, when a mouse event is being fired within the ghostEventDelay (option, 1000ms by default) after touchend, this plugin considers the mouse event to be invoked by touch.
When clicking on an element using a touchscreen, the element gains the :active state. The mouseleave event is only fired after the element loses this state by ie. clicking on another element. Since this could be seconds (or minutes!) after the mouseenter event has been fired, this plugin keeps track of an element's last mouseenter event: if the last mouseenter event was invoked by touch, the following mouseleave event is also considered to be invoked by touch.