Safari iPad 1: как отключить масштабирование / центрирование при двойном касании, но при этом держать масштабирование - PullRequest
Новая
       29

Safari iPad 1: как отключить масштабирование / центрирование при двойном касании, но при этом держать масштабирование

10 голосов
/ 10 ноября 2011

Интересно, возможно ли предотвратить двойное касание для увеличения и двойное касание к центру на конкретном элементе HTML в 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() только по событию клика?- Не имеет никакого эффекта.

Ответы [ 8 ]

9 голосов
/ 20 ноября 2011

Нет другого способа, кроме как поймать события, которые вы хотите предотвратить, и вызвать 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 означает, что мы хотим захватить события , то есть перехватить их всех, даже для наших потомков.

7 голосов
/ 24 июля 2013

Я предотвращаю двойные записи, как это: 

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

Элегантность заключается в том, что тайм-ауты не нужны.Я только обновляю метку времени.Это только сравнивается на следующем TouchStart.У меня работает на iOS 6.

Даблтапы дальше вниз по домену не затрагиваются.

То же самое работает и без jQuery: 

var doubleTouchStartTimestamp = 0;
document.addEventListener("touchstart", function (event) {
    var now = +(new Date());
    if (doubleTouchStartTimestamp + 500 > now) {
        event.preventDefault();
    }
    doubleTouchStartTimestamp = now;
});
6 голосов
/ 16 марта 2012

Я написал jQuery-плагин для той же цели - выборочное отключение двойного нажатия на заданные элементы страницы (в моем случае, кнопки навигации для переворачивания страниц). Я хочу отвечать на каждое нажатие (включая двойное-tap) как обычное событие щелчка, без iOS «волшебства прикосновения», независимо от того, как быстро пользователь нажимает на него.

Чтобы использовать его, просто запустите что-то вроде $('.prev,.next').nodoubletapzoom(); на элементах, которые вам нужны.Принцип, который он использует, заключается в том, чтобы прослушивать последовательные touchstart события на узле в течение 500 мс и запускать event.preventDefault() на секунду, если одновременно не активны другие касания.Так как функция protectDefault использует оба касания, мы также синтезируем два «пропущенных» события щелчка для узла, поэтому предполагаемое действие касания происходит столько раз, сколько предполагал пользователь.

0 голосов
/ 15 февраля 2013

Подход JQuery для отключения Double Tap Zoom в MVC4 Чтобы отключить функцию двойного касания (двойное нажатие мыши) в iOS 1+, вам нужно перехватить событие touchStart и создать переопределение для предотвращения масштабирования.

// Используя Single 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');
    });
0 голосов
/ 22 февраля 2012

На самом деле, .preventDefault () определенно работает ... используя jQuery: 

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

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

Ваша проблема с попыткой предотвратить использование .click () заключается в том, что браузер не выбрасывает элемент «click». Safari только запускает щелчок, чтобы помочь имитировать щелчок ... Но когда есть двойная вкладка, Safair не использует элемент "щелчок". Ваш обработчик событий для .click() никогда не срабатывает, поэтому .preventDefault() тоже не срабатывает.

0 голосов
/ 24 ноября 2011

Вам нужно будет реализовать функцию двойного нажатия и 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/

0 голосов
/ 18 ноября 2011

Какую версию 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;
}
0 голосов
/ 10 ноября 2011

Apple имеет множество советов со специализированными тегами для веб-набора (Safari). Просмотр официальных документов

...