Я хочу отключить функцию двойного касания масштабирования по указанным элементам в браузере (на сенсорных устройствах), без отключить все функции масштабирования.
Например: один элемент можно постучать несколько раз, чтобы что-то произошло. Это отлично работает на настольных браузерах (как и ожидалось), но в браузерах сенсорных устройств он будет увеличиваться.
Я просто хотел правильно ответить на мой вопрос, поскольку некоторые люди не читают комментарии ниже ответа. Итак, вот оно:
(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 (спасибо Kablam)
<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).
Я знаю, что это может быть старым, но я нашел решение, которое отлично сработало для меня. Нет необходимости в сумасшедших метатегах и остановке масштабирования контента.
Я не на 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.
})
Это просто отключит функцию нормального нажатия, а затем снова вызовет событие стандартного щелчка. Это предотвращает масштабирование мобильного устройства, но в остальном работает как обычно.
EDIT: теперь это проверено временем и работает в нескольких реальных приложениях. Кажется, это 100% кросс-браузер и платформа. Вышеупомянутый код должен работать как решение для копирования-вставки для большинства случаев, если вы не хотите настраивать поведение перед событием клика.
Современное (по состоянию на апрель 2019 года) решение только для CSS
Добавьте touch-action: manipulation к любому элементу, для которого вы хотите отключить двойное нажатие, как в следующем классе disable-dbl-tap-zoom:
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
Из документов касательно touch-action (выделение мое):
манипуляция
Включите жесты панорамирования и масштабирования, но отключите дополнительные нестандартные жесты, такие как двойное касание для увеличения.
Это значение работает на Android и iOS.
Если вам нужна версия, которая работает без jQuery, я изменил ответ Wouter Konecny (который также был создан путем изменения этой сущности Йоханом Сундстрёмом), чтобы использовать ванильный 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();
}
Затем добавьте обработчик событий в touchstart который вызывает эту функцию:
myButton.addEventListener('touchstart', preventZoom);
Вы должны установить свойство css touch-action в none, как описано в этом другом ответе fooobar.com/questions/110107/...
.disable-doubletap-to-zoom {
touch-action: none;
}
CSS, чтобы отключить двойное касание масштабирования глобально (на любом элементе):
* {
touch-action: manipulation;
}
манипуляция
Включите жесты панорамирования и масштабирования, но отключите дополнительные нестандартные жесты, такие как двойное касание для увеличения.
Спасибо Росс, мой ответ расширяет его: fooobar.com/questions/110095/...
Простое предотвращение поведения по умолчанию событий click, dblclick или touchend приведет к отключению функции масштабирования.
Если у вас уже есть обратный вызов по одному из этих событий, просто вызовите event.preventDefault().
Это предотвратит возможность двойного нажатия на элементы в "корпусе", это можно изменить на любой другой селектор
$('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"
}
});
Если кто-то вроде меня, который испытывает эту проблему, используя Vue.js, просто добавление .prevent сделает трюк: @click.prevent="someAction"
Я предполагаю, что у меня есть область ввода контейнера <div> с текстом, ползунками и кнопками в нем, и вы хотите запретить случайные двойные нажатия в этом <div>.
Нижеследующее не препятствует масштабированию области ввода, и оно не связано с двойным касанием и масштабированием вне моей области <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">
Использование сенсорных событий CSS: нет. Completly удаляет все сенсорные события. Просто оставив это здесь на тот случай, если у кого-то тоже возникнут проблемы, мне понадобилось 2 часа, чтобы найти это решение, и это только одна строка CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Здесь мы идем
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">