Javascript 双击移动 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10278147/
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
Double tap on mobile safari
提问by BreakPhreak
Is there a way to bind to a double-tap event (in a single line of code) for mobile safari? Or, the alternative is to implement it intercepting two single-tap events that happened in some short given time (example: http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?
有没有办法绑定到移动 safari 的双击事件（在一行代码中）？或者，替代方案是实现它拦截在给定时间内发生的两个单击事件（例如：http: //appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/）？
采纳答案by mckamey
Short answer:you must implement via two clicks.
简短回答：您必须通过两次点击来实施。
Actual answer:Here is a jQuery-free implementation of double-tap for mobile safari which only requires one line of code (to enable dblclick event):
实际答案：这是用于移动 safari 的无 jQuery 双击实现，它只需要一行代码（启用 dblclick 事件）：
In addition, you will likely need to disable mobile Safari's default zoomwith this meta tag:
此外，您可能需要使用此元标记禁用移动 Safari 的默认缩放：
<meta name="viewport" content="width=device-width,user-scalable=no" />
回答by Marko Novakovic
If you want to have working double click both on browser and IOS platform, you should have the following code:
如果你想在浏览器和IOS平台上都双击工作，你应该有以下代码：
jQuery.event.special.dblclick = {
setup: function(data, namespaces) {
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) {
var elem = this,
$elem = jQuery(elem);
$elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler);
} else {
var elem = this,
$elem = jQuery(elem);
$elem.bind('click.dblclick', jQuery.event.special.dblclick.handler);
}
},
teardown: function(namespaces) {
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0 || agent.indexOf('ipod') >= 0) {
var elem = this,
$elem = jQuery(elem);
$elem.unbind('touchend.dblclick');
} else {
var elem = this,
$elem = jQuery(elem);
$elem.unbind('click.dblclick', jQuery.event.special.dblclick.handler);
}
},
handler: function(event) {
var elem = event.target,
$elem = jQuery(elem),
lastTouch = $elem.data('lastTouch') || 0,
now = new Date().getTime();
var delta = now - lastTouch;
if (delta > 20 && delta < 500) {
$elem.data('lastTouch', 0);
$elem.trigger('dblclick');
} else {
$elem.data('lastTouch', now);
}
}
};
Try it here:
在这里试试：
回答by nemanjabu
Override dblclickevent and use bind, live, on, delegatelike for any other event:
覆盖dblclick事件和使用bind，live，on，delegate像任何其他事件：
jQuery.event.special.dblclick = {
setup: function(data, namespaces) {
var elem = this,
$elem = jQuery(elem);
$elem.bind('touchend.dblclick', jQuery.event.special.dblclick.handler);
},
teardown: function(namespaces) {
var elem = this,
$elem = jQuery(elem);
$elem.unbind('touchend.dblclick');
},
handler: function(event) {
var elem = event.target,
$elem = jQuery(elem),
lastTouch = $elem.data('lastTouch') || 0,
now = new Date().getTime();
var delta = now - lastTouch;
if(delta > 20 && delta<500){
$elem.data('lastTouch', 0);
$elem.trigger('dblclick');
}else
$elem.data('lastTouch', now);
}
};
