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

Question

我想知道在Safari iOS(iPad 1)中是否可以防止双击到缩放和双击到中心的特定HTML元素？

因为我的小HTML5游戏迫使用户进行快速点击(或点击),这被解释为双击,当它发生时 - 页面会改变缩放和居中.

检测双击(如在此答案中 - Safari iPad:防止双击放大)闻起来很糟糕..

错误答案#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提供的触摸次数:如果我们只有一个联系人,那么我们就是在点击.二,这意味着我们正在捏.

以下设置代码提供该功能:

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

演示 jsFiddle.

注意:第三个参数(true)addEventListener表示我们想要捕获事件,即捕获所有事件,即使对于我们的后代子项也是如此.

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插件 - 有选择地禁用双击缩放给定页面元素(在我的情况下,导航按钮翻转页面)我想响应每个点击(包括双击)作为普通点击事件,没有iOS"触摸魔术",无论用户点击它有多快.

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

Answer 4

Apple 有很多针对 webkit (Safari) 的专门标签的技巧。查看官方文档