如何防止doubletap变焦在iOS和Android(How to prevent doublet

2019-08-19 09:16发布

我建立使用jQuery Mobile的用于台式机,iPad和Android手机上使用的Web应用程序。 我希望用户能够点击一个按钮来增加(或减少)的值。 我的代码工作正常,在桌面上,但在iPad和Android,当用户快速敲击,屏幕缩放,而不是价值递增。 我一直试图在这里实施解决方案: Safari浏览器的iPad:防止双击缩放 (特别是由克里斯托弗·托马斯提供的精细化。

这里是我的按钮和值的代码:

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

此功能是正确捕集双击。 然而,在最后的触发功能无法正常工作(该事件不会被解雇)。 如果我代替$(this).trigger('click');$('#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);
        });
});


文章来源: How to prevent doubletap zoom in iOS and Android