Question

我想知道是否有可能阻止在Safari iOS（iPad 1）中对特定HTML元素进行双击缩放和双击中心？

因为我的小型HTML5游戏迫使用户进行快速点击（或点击），这被视为双击，并且当它发生时 - 页面会更改缩放并居中。

检测双击（如此答案 - Safari iPad : prevent zoom on double-tap）闻起来很糟糕......

错误答案＃1： <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 不符合我的目的，因为它会阻止任何缩放。

错误的回答＃2：单击点击事件可能.preventDefault()就足够了吗？ - 没有任何效果。

Answer 1

除了捕捉你想要阻止的事件之外别无他法，并且对它们进行调用preventDefault()，因为你已经或多或少已经想到了。

实际上，某些特定的CSS属性/值可能会更改全局网站行为（例如，固定宽度或fixed），但您无法安全地更改操作系统（请参阅fixed处理iOS5中的更改），这些更改也不一定会阻止所有行为（捏可能会关闭，但不会双击）。

因此，禁用默认行为仅用于双击的最佳方法是利用iOS提供的count of touches：如果我们只有一个联系人，那么我们正在点击。二，这意味着我们正在捏。

以下设置代码提供了该功能：

var elm = document.body; // or some selection of the element you want to disable

var catcher = function(evt) {
    if (evt.touches.length < 2)
        evt.preventDefault();
};

elm.addEventListener('touchstart', catcher, true);

Demo关于jsFiddle。

注意：第三个参数（true）到addEventListener意味着我们想要capture events，即使对于我们的后代孩子也是如此。

Answer 2

我正在阻止像这样的双击：

var doubleTouchStartTimestamp = 0;
$(document).bind("touchstart", function (event) {
    var now = +(new Date());
    if (doubleTouchStartTimestamp + 500 > now) {
        event.preventDefault();
    }
    doubleTouchStartTimestamp = now;
});

优雅在于事实，不需要超时。我只更新时间戳。它只能在下一个touchstart上进行比较。在iOS 6上适合我。

dom进一步向下的双击不受影响。

同样没有jQuery的工作：

var doubleTouchStartTimestamp = 0;
document.addEventListener("touchstart", function (event) {
    var now = +(new Date());
    if (doubleTouchStartTimestamp + 500 > now) {
        event.preventDefault();
    }
    doubleTouchStartTimestamp = now;
});

Answer 3

我为了同样的目的写了一个jQuery plugin - 有选择地禁用双击缩放给定页面元素（在我的情况下，导航按钮翻转页面）我想响应每个点击（包括双击）作为普通点击事件，无论用户点击它有多快，都没有iOS“触摸魔法”。

要使用它，只需在您关注的元素上运行类似$('.prev,.next').nodoubletapzoom();的内容即可。它使用的原则是在500ms内监听节点上的连续touchstart事件，并在第二个节点上运行event.preventDefault()，除非其他触摸同时处于活动状态。由于preventDefault消耗了两个触摸，我们还合成了节点的两个“错过的”点击事件，因此您的预期触摸操作发生的次数与用户预期的次数相同。

Answer 4

Apple提供了很多关于webkit（Safari）专用标签的技巧。 View Official Docs

Answer 5

您使用的是什么iOS版/ Safari浏览器？该网站绝对不会让你双击。我发现了一些CSS但没有时间尝试它，因为我即将离开：

body {
  -webkit-text-size-adjust:none;
  margin:0px;
}

div{
  clear:both!important;
  display:block!important;
  width:100%!important;
  float:none!important;
  margin:0!important;
  padding:0!important;
}

Answer 6

您需要在第二次点按时实施双击功能和preventDefault。下面是一些使用全局变量的测试代码，可以帮助您入门：

<button id="test1">Double Tap Me!</button>
<div id="test2">EMPTY</div>

var elm1 = document.getElementById('test1');
var elm2 = document.getElementById('test2');
var timeout;
var lastTap = 0;
elm1.addEventListener('touchend', function(event) {
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTap;
    clearTimeout(timeout);
    if (tapLength < 500 && tapLength > 0) {
        elm2.innerHTML = 'Double Tap';
        event.preventDefault();
    } else {
        elm2.innerHTML = 'Single Tap';
        timeout = setTimeout(function() {
            elm2.innerHTML = 'Single Tap (timeout)';
            clearTimeout(timeout);
        }, 500);
    }
    lastTap = currentTime;
});

小提琴：http://jsfiddle.net/brettwp/J4djY/

Answer 7

在MVC4中禁用双击缩放的JQuery方法要禁用iOS 1+上的双击（双击鼠标）功能，您需要捕获touchStart事件并创建覆盖以防止缩放。

//使用单个script.js和JQuery.Mobile-1.2.0 UI MVC中的每个页面都通过委托分配JQuery，因此您无需对页面进行完全刷新，从而可以利用数据-prefetch在第一次加载应用程序时加载DOM中的页面

$（document）.delegate（“＃CashRegister”，“pageinit”，function（）{

// To Disable 'Pinch to Zoom' Note: don't implement gester event handlers if you want to 
//keep pinch to zoom functionality NOTE: i use this as my pageinit is a delegate of a page
this.addEventListener("gesturestart", gestureStart, false);
this.addEventListener("gesturechange", gestureChange, false);
this.addEventListener("gestureend", gestureEnd, false);
//handle each event by disabling the defaults
function gestureStart(event) {
    event.preventDefault();
}

function gestureChange(event) {
    event.preventDefault();
}

function gestureEnd(event) {
    event.preventDefault();
}
//Recreate Double Tap and preventDefault on it
$(this).bind('touchstart', function preventZoom(e) {
// recreate the double tab functionality
        var t2 = e.timeStamp
      , t1 = $(this).data('lastTouch') || t2
      , dt = t2 - t1
      , 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').trigger('click');
    });

Answer 8

实际上，.preventDefault（）确实有效...使用jQuery：

var InputHandler = {    
    startEventType : isTouch ? "touchstart" : "mousedown"
}

$(selector).bind(InputHandler.startEventType, function(evnt) {
    evnt.preventDefault();
});

试图阻止.click（）的问题是浏览器没有抛出“click”元素。 Safari只会触发一次点击以帮助模拟点击...但是当有一个双标签时，Safair不会通过“点击”元素。 .click()的事件处理程序无法触发，因此.preventDefault()也不会触发。

Safari iPad 1：如何在双击时禁用缩放/居中，但保持缩放变焦

8 个答案: