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

Question

我正在使用 Jquery Mobile 构建一个可在桌面、iPad 和 Android 手机上使用的 Web 应用程序。我希望用户能够点击按钮来增加(或减少)一个值。我的代码在桌面上运行良好，但在 iPad 和 Android 上，当用户快速点击时，屏幕会缩放而不是值递增。我一直在尝试在这里实现解决方案:Safari iPad : prevent zoom on double-tap (特别是 Christopher Thomas 提供的改进。

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

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

这是我单击按钮的事件处理程序(顺便说一句 - 我认为 Christopher 的答案中的参数是错误的):

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