有没有一种方法可以在移动Safari中绑定双击事件(以单行代码形式)?或者,另一种选择是拦截在某个短时间内发生的两个单击事件来实现它(例如:http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?
有没有一种方法可以在移动Safari中绑定双击事件(以单行代码形式)?或者,另一种选择是拦截在某个短时间内发生的两个单击事件来实现它(例如:http://appcropolis.com/blog/implementing-doubletap-on-iphones-and-ipads/)?
简单回答:您必须通过两次点击来实现。
实际回答:这是一个不需要jQuery的移动Safari双击实现,只需要一行代码(启用dblclick事件):
此外,您可能需要使用此元标记禁用移动Safari的默认缩放:
<meta name="viewport" content="width=device-width,user-scalable=no" />
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);
}
}
};
在这里尝试:
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);
}
};