javascript - 在没有 jQuery 的情况下防止双击缩放

Question

在最新的 iOS Safari 中，无法阻止意外的双击缩放，因此我的全屏 map 应用程序有时会失去对用户的控制。

我用 jQuery 找到了解决方案，效果很好。

$.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');
    });
};
$('body').nodoubletapzoom();

但我想在没有 jQuery 的情况下执行此操作。

如果不使用 jQuery，这段代码的等效项是什么？

Answer 1

试试这个:

(function() {
    var lastTouch = 0;
    function preventZoom(e) {
        var t2 = e.timeStamp;
        var t1 = lastTouch || t2;
        var dt = t2 - t1;
        var fingers = e.touches.length;
        lastTouch = t2;

        if (!dt || dt >= 300 || fingers > 1) {
            return;
        }
        resetPreventZoom();
        e.preventDefault();
        e.target.click();
    }
    function resetPreventZoom() {
        lastTouch = 0;
    }

    document.addEventListener('touchstart', preventZoom, false);
    document.addEventListener('touchmove', resetPreventZoom, false);
})();

编辑: 当我重置触摸间隔时，我通过聆听 touchmove 进行了改进，因为它会损害快速滚动。我还延迟了 300 毫秒，因为这是触摸屏上常用的延迟。 500 毫秒延迟太长。