如何防止iOS和Android中的双机放大 [英] How to prevent doubletap zoom in iOS and Android

问题描述

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

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

 < div class =content> 
< div id =status_pagedata-role =page> 
< div data-role =contentdata-theme =d> 
< div id =val> 1< / div> 
< div id =butdata-role =button>点击< / div> 
< / div> 
< / div> 
< / div> 
  

这是我的事件处理程序，点击按钮（btw - 我认为克里斯托弗的答案中的参数是错误的方式）：

  $（。content）.on（click，$（＃but），function ）{
 var but_val = pars EINT（$（ ＃VAL）文本（））; 
 $（＃val）。text（but_val + 1）; 
}）; 
  

...这里是nodoubletap函数：

$ b $ （$（html.touch）。长度= $（$（$）$ $ $ $ $ $ $ = 0）return;

$（this）.bind（'touchstart'，function preventZoom（e）{
var t2 = e.timeStamp;
var t1 = $这个）.data（'lastTouch'）|| t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$（this）.data 'lastTouch'，t2）;
if（！dt || dt> 500 || finger> 1）{
return; // not double-tap
}
e.preventDefault（）; //双击 - 防止缩放
//也综合点击事件我们刚刚吞下
$（this）.trigger（'click'）;
}） ;
};
}）（jQuery）;

此功能正确捕获双击。但是，最后的触发器功能不起作用（事件未被触发）。如果我用 $（this）.trigger（'click'）; 替换 $（'＃but'）。 那么一切都应该如此。我希望这可以用于多个不同的按钮，所以我需要能够根据调用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 || finger> 1）{
 return; //不要双击
} 
 e.preventDefault（）; //双击 - 防止缩放
 //也综合点击事件我们刚刚吞下
 $（e .target）.trigger（'click'）; 
}）; 
}; 
}）（jQuery）; 
 
 $（document）.on（'pageinit'，'＃status_page，function（）{
 $（body）nodoubletapzoom（）; 
 $（ 。（）; $（$$$$$$$ val）。text（curr_val + 1）; 
}）; 
}）; 
  

I am building a web app using Jquery Mobile for use on a desktop, iPad and Android phone. I want the user to be able to tap a button to increment (or decrement) a value. My code works fine on a desktop, but on the iPad and Android, when the user taps rapidly, the screen zooms instead of the value incrementing. I have been trying to implement the solution here: Safari iPad : prevent zoom on double-tap (and in particular the refinement provided by Christopher Thomas.

Here is my code for the button and value:

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

Here is my event handler for a click on the button (btw - I think the parameters in Christopher's answer were the wrong way round):

        $(".content") .on("click",$("#but"),function(){
            var but_val = parseInt($("#val").text());
            $("#val").text(but_val+1);
        });

...and here is the nodoubletap function:

(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 function is trapping the double tap correctly. However, the trigger function at the end is not working (the event is not being fired). If I substitute $(this).trigger('click'); with $('#but').trigger('click'); then everything works as it should. I want this to work for a number of different buttons, so I need to be able to trigger the event based on the object that called the touchstart event. Can anyone help me to fix this please.

解决方案

ok, so "engeeaitch" the final solution was in the following jsfiddle?

http://jsfiddle.net/GZEM7/18/

and the solution was to replace

$(this).trigger("click"):

with

$(e.target).trigger("click");

and of course, I removed your IOS testing because then it'll work on chrome and android devices :D

thats the final solution? Cool! I'm going to update my code with the new version, I think it'll be better

the final code is:

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

这篇关于如何防止iOS和Android中的双机放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！