Jquery 如何在iOS和Android中防止双击放大

我正在使用Jquery Mobile构建一个web应用程序，用于桌面、iPad和Android手机。我希望用户能够点击一个按钮来增加（或减少）一个值。我的代码在桌面上运行良好，但在iPad和Android上，当用户快速点击时，屏幕会缩放，而不是值递增。 我一直在尝试在这里实现解决方案：（尤其是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>

…下面是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);

此函数正在正确捕获双击。但是，结尾处的触发器函数不起作用（未触发事件）。如果我将

$（此）.trigger（'click'）；

替换为

$（'but'）。trigger（'click'））

然后一切都正常工作。我想让它适用于许多不同的按钮，因此我需要能够基于称为touchstart事件的对象触发事件。有人能帮我解决这个问题吗。

好的，那么“EngeAitch”的最终解决方案是在以下JSFIDLE中

解决办法是更换

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

---

我在这里添加了一个JSFIDLE:[link]版本11可以正常工作（它使用

$（'#但是'）

）版本10不工作（它使用

$（这）

）。这里不解释如何将jquery函数应用于元素，例如，请参阅我的代码，我在其中说“$”（“body.nodoubletapzoom（）；这是因为我想将该函数应用于整个文档，这可以解释为什么要获取整个文档而不是选定的元素？此外，我还有一个“内容”节点中，我希望确保所有事件不会冒泡到body元素，因此我使用jquery.on（）将jquery click处理程序等附加到内容节点，然后将双击处理程序附加到body。这意味着任何从“content”节点逃逸并到达body的事件，我希望忽略，但我使用“content”像一个用来捕捉事件的人，你明白了吗？嗨，克里斯托弗-非常感谢你的帮助。我一定是做错了什么，但我不确定是什么-如果你看看JSFIDLE，我已经将nodoubletapzoom函数绑定到了主体上，主体内有一个内容节点。如果你能指出我哪里出了错，我将非常感激。它应该是“$（this）。trigger（“click”）”然后你将它更改为$（“#but”）……你能将它更改为

noDoubleTapZoom

而不是

noDoubleTapZoom

？这会让我很高兴的。好吧，你可以做任何你想做的事，只要复制代码并随意更改即可。

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

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