如何防止iOS和Android中的双击缩放

我正在使用Jquery Mobile构建一个Web应用程序，用于桌面，iPad和Android手机。 我希望用户能够点击一个按钮来增加（或减少）一个值。 我的代码在桌面上工作正常，但在iPad和Android上，当用户快速点击时，屏幕会缩放而不是增加值。 我一直在尝试在这里实现解决方案： Safari iPad：防止双击放大 （特别是Christopher Thomas提供的改进）。

这是我的按钮和值的代码：

 
 
 
1
 
Click
 
 
  

这是我点击按钮的事件处理程序（顺便说一句 – 我认为克里斯托弗答案中的参数是错误的方式）：

  $(".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); 

此function正确捕获双击。 但是，最后的触发器function不起作用（事件未被触发）。 如果我用$(this).trigger('click'); with $('#but').trigger('click'); 然后一切都按预期工作。 我希望这适用于许多不同的按钮，因此我需要能够根据调用touchstart事件的对象触发事件。 任何人都可以帮我解决这个问题。

Answer 1

好的，所以“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); }); });