如何防止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); 
     }); 
});