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

我想知道是否有可能在Safari iOS (iPad 1)中防止双击缩放和双击居中?

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

检测双击(就像在这个答案- Safari iPad:防止缩放双击)闻起来不好…

错误答案#1:<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> -不适合我的目的，因为它会阻止任何变焦。

错误答案#2:也许.preventDefault()单独点击事件就足够了?-不生效

除了捕捉您想要阻止的事件并调用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意味着我们想要捕获事件，即捕获所有事件，甚至是后代的子事件。

我正在防止像这样的双重跳转:

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

的优雅之处在于不需要超时。我只更新时间戳。只有在下次触球时才会比较。

dom下的双点不受影响。

不使用jQuery也一样:

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

我为同样的目的写了一个jQuery插件-选择性地禁用双击缩放给定的页面元素(在我的情况下，导航按钮翻页)我想响应每一个点击(包括双击)作为一个正常的点击事件，没有iOS的"触摸魔法"，无论用户点击它有多快。

要使用它，只需在您关心的元素上运行类似$('.prev,.next').nodoubletapzoom();的命令。它使用的原理是在500ms内监听节点上连续的touchstart事件，并在第二个节点上运行event.preventDefault()事件，除非其他触摸同时处于活动状态。因为这个preventDefault消耗了两个触摸，我们也合成了节点的两个"错过的"点击事件，所以你预期的触摸动作发生的次数和用户预期的一样多。

苹果有很多关于webkit (Safari)的特殊标签的提示。查看官方文档

您使用的是什么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;
}

您需要在第二次点击时实现双重点击功能和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/

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

//使用Single script.js和JQuery. mobile -1.2.0 UI, MVC中的每个页面都通过委托分配JQuery，因此您不必对页面进行完全刷新，从而可以利用数据预取的优势，在应用程序第一次加载时将页面加载到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');
    });

实际上，.preventDefault()确实有效…使用jQuery:

var InputHandler = {    
    startEventType : isTouch ? "touchstart" : "mousedown"
}
$(selector).bind(InputHandler.startEventType, function(evnt) {
    evnt.preventDefault();
});

试图阻止on .click()的问题是浏览器不会抛出"click"元素。Safari只触发点击来帮助模拟点击…但是当有双选项卡时，Safair不会通过"click"元素。.click()的事件处理程序从未触发，因此.preventDefault()也不会触发。

相关内容

最新更新

热门标签：