すべてのズーム機能を無効にすることなく、ブラウザーの指定された要素（タッチデバイス上）のダブルタップズーム機能を無効にしたい。
例：何かが発生するために、1つの要素を複数回タップすることができます。これはデスクトップブラウザーでは（期待どおり）正常に動作しますが、タッチデバイスブラウザーではズームインします。
回答:
注（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または他のデバイスでテストされていません（Webサイトは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％クロスブラウザとプラットフォームのようです。上記のコードは、クリックイベントの前にカスタム動作が必要な場合を除き、ほとんどの場合、コピーと貼り付けのソリューションとして機能します。
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の回答（も変更することで作成されたこの要旨によるヨハン・サンドストロームをバニラは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);
この他の回答で説明されtouch-actionてnoneいるようにcssプロパティを設定する必要がありますhttps://stackoverflow.com/a/42288386/1128216
.disable-doubletap-to-zoom {
touch-action: none;
}シンプルのデフォルトの動作を妨げるclick、dblclickまたはtouchendイベントは、ズーム機能を無効にします。
このイベントの1つにすでにコールバックがある場合は、単にを呼び出します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.
}
});タッチスタートで、ズームを防止してクリックをトリガーするコードを追加しました。
$('.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のインターネットアプリを除いて機能します。Samsungは、完全タップでは<div>なく、少なくともタップを処理する要素ではダブルタップを無効にします。と入力return falseを除いて、を返します。textrange
$('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）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は1行だけです。 https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action