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

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

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

11 62
html cocoa-touch cross-browser 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, Я изменил ответ Ваутера Конечны (который также был создан путем модификации в этом суть 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, отключает двойное нажатие на всех, не препятствует масштабированию, и ничего не делает о двойном нажатии в других браузерах. Двойное нажатие-ингибирование <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