用 jquery mobile 中的 tap 替换所有点击事件以加快速度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10028782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace all click events with tap in jquery mobile to speed up
提问by Hans Wassink
Im developing a mobile application using phonegap and jquery mobile. I created the layout with data-roles etc... and in this application I have a lot of buttons like the following to go to different pages. (I don't specifically bind click events to these buttons, they just use the href for the magic).
我使用 phonegap 和 jquery mobile 开发移动应用程序。我用数据角色等创建了布局……在这个应用程序中，我有很多像下面这样的按钮可以转到不同的页面。（我没有专门将点击事件绑定到这些按钮，它们只是使用 href 来实现魔法）。
<a data-role="button" href="#page6">
go to page 6
</a>
The problem with these buttons is that they are incredibly slow, with the 400ms delay every1 is talking about. Is it possible to replace all events on these buttons with tap/vclick/touchstart(Whatever is best) so they respond instant? They will never have to deal with double taps or people dragreleasing...
这些按钮的问题在于它们非常慢，每个人都在谈论 400 毫秒的延迟。是否可以用 tap/vclick/touchstart（无论是最好的）替换这些按钮上的所有事件，以便它们立即响应？他们将永远不必处理双击或人们拖放……
Thanks
谢谢
回答by Trott
I wrote a JS utility called Lightning Touchto get rid of exactly that delay. Here's me demonstrating it (badly).
我编写了一个名为 Lightning Touch 的 JS 实用程序来消除这种延迟。 这是我在演示它（很糟糕）。
The foundation of that library is Google's fastButtons, which apparently is no longer available (or if it is, the URL has changed) but used to be available under Creative Commons license from code.google.com.
该库的基础是 Google 的 fastButtons，它显然不再可用（或者如果可用，URL 已更改）但曾经在 code.google.com 的知识共享许可下可用。
Lightning Touch triggers on touchend rather than touchstart, but I suspect you can modify it to work on touchstart without too much effort, if it doesn't work as-is for you.
Lightning Touch 在 touchend 而不是 touchstart 上触发，但我怀疑您可以将其修改为在 touchstart 上工作而无需太多努力，如果它不适合您的话。
In a presentation, Brian Lerouxhad a slide about the 400ms-ish delay issue that said "PPL HAVE SOLVED THE SHIT OUT OF THIS."He linked to a few projects that you might look at if Lightning Touch doesn't work for your situation. And if those fail you, you can try looking through this other list that he linked to in the same presentation.
在一次演示中，Brian Leroux有一张关于 400 毫秒延迟问题的幻灯片，上面写着“PPL 已经解决了这个问题”。他链接了几个项目，如果 Lightning Touch 不适合您的情况，您可能会查看这些项目。如果这些都失败了，您可以尝试查看他在同一演示文稿中链接到的其他列表。
Hope there's a solution in there somewhere for you. (And if Lightning Touch doesn't work, I'd love to know exactly why so I can improve it.)
希望那里有适合您的解决方案。（如果 Lightning Touch 不起作用，我很想知道确切原因，以便我可以改进它。）
回答by ali mokrani
try this library:quojsit worked perfectly for me.
试试这个库：quojs它对我来说完美无缺。
here's an example of it(the touch function is pretty fast)i'm switching classes in here :
这是一个例子（触摸功能非常快）我在这里切换类：
$$("#man").touch(function(){
switchGender(true);
});
$$("#woman").touch(function(){
switchGender(false);
});
$$(".next").touch(function(){
nextPage();
});
回答by Ivan Shmidt
This tiny code should help:
这个小代码应该有帮助：
$("a").on("tap",function(e){
$(this).trigger("click");
e.preventDefault();
return false;
});
Put it into
把它放入
$(document).on("ready",function(){
and voila!
瞧！
回答by mbokil
This script will test if the device is touch enabled and then replace click events with touchend events. It adds touch events to both links and JavaScript onclick element attributes. Script has been tested on Android, iPhone, iPad, and Windows Phone.
此脚本将测试设备是否启用了触摸功能，然后将点击事件替换为 touchend 事件。它将触摸事件添加到链接和 JavaScript onclick 元素属性。脚本已在 Android、iPhone、iPad 和 Windows Phone 上进行测试。
//jQuery doc.ready
$(function () {
addTouchEvents();
});
addTouchEvents = function() {
var isTouchDevice = (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
if (isTouchDevice) {
//replace link clicks with ontouchend events for more responsive UI
$("a", "[onclick]").on("touchstart",function(e) {
$(this).trigger("click");
e.preventDefault();
return false;
});
}
}
回答by Michael
This plugin will help greatly
这个插件将有很大帮助
$.fn.addTouch = function() {
if ($.support.touch) {
this.each(function(i,el){
el.addEventListener("touchstart", iPadTouchHandler, false);
el.addEventListener("touchmove", iPadTouchHandler, false);
el.addEventListener("touchend", iPadTouchHandler, false);
el.addEventListener("touchcancel", iPadTouchHandler, false);
});
}
};
