Отключить опцию двойного нажатия "увеличить" в браузере на сенсорных устройствах

Я хочу отключить на дважды нажмите zoom функциональность на указанные элементы в браузере (на сенсорных устройствах), без отключения всех функций масштабирования.

например: один элемент может быть использован несколько раз, чтобы что-то произошло. Это отлично работает в настольных браузерах (как и ожидалось), но в браузерах сенсорных устройств он будет приближаться.

62
browser html touch zoom

11 ответов

<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>

я использовал это совсем недавно, и он отлично работает на iPad. Не тестировались на Android или других устройствах (поскольку веб-сайт будет отображаться только на iPad).

36

Я знаю, что это может быть старый, но я нашел решение, которое отлично работает для меня. Нет необходимости в сумасшедших метатегах и остановке масштабирования контента.

Я не на 100% уверен, как кросс-устройство это, но это сработало именно так, как я хотел.

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

Это просто отключит обычную функцию нажатия, а затем снова вызовет стандартное событие щелчка. Это предотвращает масштабирование мобильного устройства, но в остальном работает нормально.

изменить: это теперь был проверен временем и работает в паре живых приложений. Кажется, 100% кросс-браузер и платформа. Приведенный выше код должен работать как решение для копирования и вставки в большинстве случаев, если вы не хотите пользовательского поведения до событие click.

32

Я просто хотел ответить на свой вопрос правильно, так как некоторые люди не читают комментарии ниже ответа. Вот оно:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        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');
      });
  };
})(jQuery);

Я не писал этого, я просто изменил его. Я нашел версию только для iOS здесь:https://gist.github.com/2047491 (Спасибо Каблам)

29

Если вам нужна версия работает без jQuery, Я изменил Wouter Konecny ответ (который также был создан путем модификации в этом суть by Юхан Сундстрем) использовать ванильный JavaScript.

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}
11

вы должны установить свойство css touch-action to none как описано в этом другом ответе https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}
4

простой предотвратить поведение по умолчанию click, dblclick или touchend события отключат функцию масштабирования.

если у вас уже есть обратный вызов на одном из этих событий, просто вызовите event.preventDefault().

2

Это предотвратит двойное нажатие на увеличение элементов в "теле" это может быть изменено на любой другой селектор

$('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var 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
            $(e.target).trigger('click');

});

но это также предотвратило запуск моего события щелчка при нажатии несколько раз, поэтому мне пришлось связать другое событие, чтобы вызвать события при нескольких щелчках

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

на touchstart я добавил код, чтобы предотвратить масштабирование и вызвать щелчок.

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var 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
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });
1

Если есть кто-то, как я, кто испытывает эту проблему, используя Vue.js, просто добавив .запретить сделает трюк:@click.prevent="someAction"

1

я предполагаю, что у меня есть <div> область входного контейнера с текстом, ползунками и кнопками в нем и хотите заблокировать случайные двойные нажатия в этом <div>. Следующее не препятствует масштабированию области ввода и не относится к двойному нажатию и масштабированию за пределами my <div> зона. Есть варианты в зависимости от приложения браузера.

я только что попробовал.

(1) для Safari на iOS и Chrome на Android и является предпочтительным методом. Работает за исключением Интернет-приложение на Samsung, где он отключает двойные краны не на полном <div>, но, по крайней мере на элементы, ручки кранов. Он возвращается return false, С исключением на text и range входы.

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) дополнительно для встроенного интернет-приложения на Android (5.1, Samsung), блокирует двойные нажатия на <div>, но блокирует масштабирование на <div>:

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) для Chrome на Android 5.1, отключает двойное нажатие вообще, не препятствует масштабированию и ничего не делает о double-tap в других браузерах. Двойное нажатие-ингибирование <meta name="viewport" ...> раздражает, потому что <meta name="viewport" ...> кажется хорошей практикой.

<meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=5, user-scalable=yes">
0

У меня были проблемы с этим, потому что мне пришлось сделать общедоступный сенсорный экран, и ни одно из этих решений не работало для меня, я использовал CSS touch-events: none, чтобы полностью удалить все сенсорные события. Просто оставив это здесь, Если у кого-то также есть эти проблемы, мне потребовалось 2 часа, чтобы найти это решение, и это только одна строка css. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

0

поехали

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

-2