我想禁用浏览器（在触摸设备上）中指定元素上的双击缩放功能，而不禁用所有缩放功能。
例如：可以多次点击一个元素以使某事发生。在桌面浏览器上（按预期方式），此方法工作正常，但在触摸设备浏览器上，它将放大。
Answers:
注意（从2020-08-04开始）：此解决方案似乎无法在iOS Safari v12 +中运行。一旦找到涵盖iOS Safari的明确解决方案，我将更新此答案并删除此注释。
纯CSS解决方案
添加touch-action: manipulation到要禁用双击缩放的任何元素，例如以下disable-dbl-tap-zoom类：
.disable-dbl-tap-zoom {
touch-action: manipulation;
}从touch-action文档（重点是我的）：
操纵
启用平移和收缩缩放手势，但禁用其他非标准手势，例如双击以缩放。
此值适用于Android和iOS。
<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.
})这将仅禁用常规的点击功能，然后再次调用标准的点击事件。这样可以防止移动设备缩放，否则将正常运行。
编辑：这已经过时间测试，并在几个实时应用程序中运行。似乎是100％跨浏览器和平台。在大多数情况下，除非您希望在click事件之前执行自定义行为，否则以上代码应可作为复制粘贴解决方案。
pointer-events: none
我只是想正确回答我的问题，因为有些人没有阅读答案下面的评论。所以这里是：
(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）
CSS禁用全局双击缩放（在任何元素上）：
* {
touch-action: manipulation;
}操纵
启用平移和收缩缩放手势，但禁用其他非标准手势，例如双击以缩放。
谢谢罗斯，我的回答扩展了他的观点：https : //stackoverflow.com/a/53236027/9986657
document.getElementById('root').addEventListener('click', () => {})
如果您需要一个不使用jQuery的版本，则可以修改Wouter Konecny的答案（也由JohanSundström修改了这个要点来创建）以使用普通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); myButton.addEventListener('touchstart', preventZoom);
您应的CSS属性设置touch-action，以none在该对方的回答中描述https://stackoverflow.com/a/42288386/1128216
.disable-doubletap-to-zoom {
touch-action: none;
}* {
-ms-touch-action: manipulation;
touch-action: manipulation;
}禁用双击以放大触摸屏。包括Internet Explorer。
这样可以防止双击“ body”中的元素，可以将其更改为任何其他选择器
$('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');
});但这也阻止了我的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"
}
});我假设我确实有一个<div>包含文本，滑块和按钮的输入容器区域，并希望在其中避免意外的双击<div>。以下内容不会禁止在输入区域上进行缩放，并且与在我的<div>区域之外双击和缩放无关。视浏览器应用程序而定。
我刚试过
（1）对于iOS上的Safari和Android上的Chrome，是首选方法。适用于Samsung上的Internet应用程序，该应用程序不完全禁用两次抽头<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）上的内置Internet应用程序，禁止双击<div>，但禁止放大<div>：
$('selector of <div> input area').on('touchstart touchend',disabledoubletap);（3）对于Android 5.1上的Chrome，完全禁用双击，不禁止缩放，并且在其他浏览器中不执行双击操作。两次禁止<meta name="viewport" ...>令人讨厌，因为这<meta name="viewport" ...>似乎是一种好习惯。
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=5, user-scalable=yes">使用CSS触摸事件：无完全清除所有触摸事件。如果有人遇到这个问题，就把它留在这里，花了我2个小时才找到这个解决方案，而且它只是一行CSS。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action