我正在使用Jquery Mobile构建一个Web应用程序,以在台式机,iPad和Android手机上使用。我希望用户能够点击一个按钮来增加(或减少)值。我的代码在台式机上运行良好,但是在iPad和Android上,当用户快速点击时,屏幕会缩放而不是值递增。
我一直在尝试在此处实施解决方案:Safari iPad : prevent zoom on double-tap(尤其是Christopher Thomas提供的改进)。
这是我的按钮和值的代码:
<div class="content">
<div id ="status_page" data-role="page">
<div data-role="content" data-theme="d">
<div id="val">1</div>
<div id="but" data-role="button">Click</div>
</div>
</div>
</div>
这是单击按钮的事件处理程序(顺便说一句-我认为Christopher的答案中的参数是错误的方法):
$(".content") .on("click",$("#but"),function(){
var but_val = parseInt($("#val").text());
$("#val").text(but_val+1);
});
...这是nodoubletap函数:
(function($) {
$.fn.nodoubletapzoom = function() {
if($("html.touch").length == 0) return;
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click');
});
};
})(jQuery);
此功能可正确捕获双击。但是,最后的触发器功能不起作用(未触发事件)。如果我将
$(this).trigger('click');
替换为$('#but').trigger('click');
,那么一切都会正常进行。我希望它可以用于许多不同的按钮,因此我需要能够基于称为touchstart事件的对象来触发事件。谁能帮我解决这个问题。 最佳答案
好的,所以“ engeeaitch”的最终解决方案是在以下jsfiddle中?
http://jsfiddle.net/GZEM7/18/
解决的办法是更换
$(this).trigger("click"):
与
$(e.target).trigger("click");
当然,我删除了您的IOS测试,因为它可以在chrome和android设备上使用:D
多数民众赞成在最后的解决方案?凉!我将使用新版本更新代码,我认为它会更好
最终的代码是:
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(e.target).trigger('click');
});
};
})(jQuery);
$(document).on('pageinit',"#status_page", function(){
$("body").nodoubletapzoom();
$(".content").on("click", "#but", function() {
var curr_val = parseInt($("#val").text());
$("#val").text(curr_val + 1);
});
});
关于jquery - 如何防止iOS和Android中双击放大,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15804296/