戻る

ダブルタップ無効の設定

ダブルタップを無効にする設定方法について

[CSS]

<style> html { touch-action:manipulation; } </style>

touch-action	画面をタッチしたときの動作の制御を行います。
manipulation	ダブルタップでのズームなど、標準外のジェスチャーを無効します。

[manipulationの補足]
パンおよびズームのジェスチャーは有効にします。
ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。
ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。
※manipulationは「pan-x pan-y pinch-zoom」の別名です。

copy

document.addEventListener('dblclick', function(e) 
{
	(他の処理)
	...
	e.preventDefault();
}, { passive: false });

特定の要素に対してダブルタップを無効にしたい場合に有効です。
preventDefault()は、イベントが発生した直後に実行する必要があります。
遅れて実行すると、意図したとおりに動作しない場合があります。
特に、touchendイベントでpreventDefault()を使用する場合は、イベント処理の最後に実行するように注意が必要です。

イベントのデフォルトの動作をキャンセルするために使用されるメソッドです。
イベントオブジェクトのメソッドとして提供されてています。
イベントハンドラー内で呼び出すことで、ブラウザが持つデフォルトの動作を無効化します。

ベントリスナーがスクロールなどのブラウザのデフォルトの動作をブロックしないことを意味します。
これはパフォーマンス上の理由で推奨される設定です。

イベントリスナーがスクロールなどのブラウザのデフォルトの動作をブロックする可能性があることを意味します。
今回のようにevent.preventDefault()を呼び出して
ブラウザのデフォルトの動作をキャンセルしたい場合は
passive: false を設定する必要があります。

metaタグのuser-scalable=noは、iOSのSafariでは無効になっているため、
この方法で制御することを考慮しないで、上記のCSSやjavascriptの方法で対処する必要があります。

iPhoneの「ズーム機能」が有効になっている場合、三本指でダブルタップすると拡大・縮小が切り替わります。
この機能を無効にするには、設定アプリから
[STEP 1]「アクセシビリティ」
[STEP 2]「ズーム」
[STEP 3]「ズーム機能」をオフ
にする必要があります。


戻る

back

Disable double tap

How to disable double tap

[CSS]

<style> html { touch-action:manipulation; } </style>

touch-action	Controls what happens when the screen is touched.
manipulation	Disables non-standard gestures, such as double-tap zoom.

[Manipulation Notes]
Pan and zoom gestures are enabled.
Disables additional non-standard gestures, such as double-tap zoom.
Disabling double-tap zoom prevents the browser from having to wait for a click event when the user taps the screen.
Note: Manipulation is an alias for "pan-x pan-y pinch-zoom."

copy

document.addEventListener('dblclick', function(e) 
{
	(Other Processing)
	...
	e.preventDefault();
}, { passive: false });

This is useful if you want to disable double taps for specific elements.
preventDefault() must be executed immediately after the event occurs.
Executing it later may not work as intended.
In particular, when using preventDefault() with the touchend event, be sure to execute it at the end of the event processing.

This method is used to cancel the default behavior of an event.
It is provided as a method of the event object.
Calling it within an event handler disables the browser's default behavior. 

This means that the event listener will not block default browser behavior, such as scrolling.
This is the recommended setting for performance reasons.

This means that the event listener may block default browser behavior, such as scrolling.
If you want to cancel the browser's default behavior by calling event.preventDefault(), as in this case,
you must set passive: false.

The meta tag user-scalable=no is disabled in Safari on iOS, so
do not consider controlling it this way. Instead, use the CSS or JavaScript methods described above.

If your iPhone's "Zoom Function" is enabled, double-tapping with three fingers will toggle between zooming in and out.
To disable this function, go to the Settings app and:
[STEP 1] "Accessibility"
[STEP 2] "Zoom"
[STEP 3] Turn off "Zoom Function."



back