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

Question

我正在使用Jquery Mobile在桌面，iPad和Android手机上构建一个Web应用程序。我希望用户能够点击一个按钮来增加（或减少）一个值。我的代码可以在桌面上正常工作，但在iPad和Android上，当用户快速点击时，屏幕将缩放而不是增加值。 我一直试图在这里实现的解决方案：Safari iPad : prevent zoom on double-tap（特别是由克里斯托弗·托马斯提供的细化

这里是我的按钮和值码：

<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> 

这里是我的事件处理程序一个点击按钮（顺便说一句 - 我认为克里斯托弗的回答参数进行了错误的方式轮）：

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

此功能正确捕捉双击。但是，最后的触发器功能不起作用（事件未被触发）。如果我用$('#but').trigger('click');替代$(this).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); 
     }); 
});