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 ，例如），但你從更改OS不是安全的（見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。

注意： addEventListener的第三個參數（ true ）意味着我們想要捕獲事件 ，即捕獲所有事件 ，即使對於我們的后代子項也是如此。

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(); 關於你關心的元素。 它使用的原則是在500ms內監聽節點上的連續touchstart事件，並在第二個節點上運行event.preventDefault() ，除非其他觸摸同時處於活動狀態。 由於preventDefault消耗了兩個觸摸，我們還合成了節點的兩個“錯過的”點擊事件，因此您的預期觸摸操作發生的次數與用戶預期的次數相同。

Answer 4

在MVC4中禁用雙擊縮放的JQuery方法要禁用iOS 1+上的雙擊（雙擊鼠標）功能，您需要捕獲touchStart事件並創建覆蓋以防止縮放。

//使用單個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');
    });

Answer 5

Apple有很多關於webkit（Safari）專用標簽的技巧。 查看官方文檔

Answer 6

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

您需要實現雙擊功能並在第二次點擊時防止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 8

實際上，.preventDefault（）確實有效...使用jQuery：

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

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

試圖阻止.click（）的問題是瀏覽器沒有拋出“click”元素。 Safari只會觸發一次點擊以幫助模擬點擊...但是當有一個雙標簽時，Safair不會通過“點擊”元素。 您的.preventDefault()事件處理程序.click()觸發，因此.preventDefault()也不會觸發。