sun*_*100 44 javascript jquery click touch ios
我正在开发一些javascript UI,并使用很多触摸事件,如'touchend',以改善触摸设备的响应.然而,有一些逻辑问题困扰着我......
我已经看到许多开发人员在同一事件中混合'touchend'和'click'.在许多情况下它不会受到伤害,但基本上该功能会在触摸设备上触发两次:
button.on('click touchend', function(event) {
// this fires twice on touch devices
});
有人建议可以检测触摸功能,并适当设置事件,例如:
var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';
button.on(myEvent, function(event) {
// this fires only once regardless of device
});
上面的问题是它会破坏支持触摸和鼠标的设备.如果用户当前正在双输入设备上使用鼠标,则"点击"将不会触发,因为仅为该按钮分配了"touchend".
另一个解决方案是检测设备(例如"iOS")并根据以下内容分配事件: 在iPad上的touchend上调用两次Click事件.当然,上面链接中的解决方案仅适用于iOS(不是Android或其他设备),而且似乎更像是一个"黑客"来解决一些非常基本的东西.
另一种解决方案是检测鼠标移动,并将其与触摸功能相结合,以确定用户是鼠标还是触摸.问题当然是当用户想要检测它时用户可能没有移动鼠标......
我能想到的最可靠的解决方案是使用简单的去抖功能来简单地确保该函数仅在短时间间隔内触发一次(例如100ms):
button.on('click touchend', $.debounce(100, function(event) {
// this fires only once on all devices
}));
我错过了什么,或者有没有人有更好的建议？
编辑:我在帖子后发现了这个链接,它提出了与上面类似的解决方案: 如何绑定'touchstart'和'click'事件但不回复两者？
sun*_*100 30
经过一天的研究,我认为最好的解决方案就是坚持点击并使用https://github.com/ftlabs/fastclick来消除触摸延迟.我不是100%肯定这和touchend一样有效,但至少不远.
我确实找到了一种通过使用stopPropagation和触摸两次触发事件的方法preventDefault,但这很狡猾,因为它可能会干扰其他触摸手势,具体取决于应用它的元素:
button.on('touchend click', function(event) {
event.stopPropagation();
event.preventDefault();
// this fires once on all devices
});
我实际上正在寻找一种解决方案,将touchstart结合在一些UI元素上,但我看不出如何将其与上面的解决方案之外的click结合起来.
小智 6
这个问题已得到解答,但可能需要更新.
根据Google的通知,如果我们在<head>元素中包含以下行,则不会再有300-350ms的延迟.
<meta name="viewport" content="width=device-width">
而已!并且点击和触摸事件之间不会有任何区别!
| 归档时间： |
|
| 查看次数： |
39070 次 |
| 最近记录： |