JavaScriptを無効にしてタッチを無効にする

JavaScript ノータッチ

モバイル デバイスの普及に伴い、ますます多くの Web サイトやアプリケーションがモバイル エクスペリエンスに重点を置き始めています。この場合、タッチスクリーン技術が広く使用されています。ただし、場合によっては、Web サイトまたはアプリケーションが適切に機能するようにタッチを無効にする必要があります。この記事では、JavaScript を使用してタッチを無効にする方法について説明します。

タッチとは何ですか?

モバイル端末では、通常、指で画面に触れて操作することを「タッチ」と呼びます。タッチには、1 本指のタップ、スワイプ、ピンチなど、さまざまな形式があります。 Web 開発では、CSS と JavaScript を使用してタッチ イベントを処理できます。

なぜタッチを無効にする必要があるのでしょうか?

場合によっては、Web サイトまたはアプリケーションが適切に機能するようにタッチを無効にする必要があります。一般的な状況は次のとおりです。

1. 要素の相互作用の競合

ページ上に複数の相互作用可能な要素 (ボタン、リンク、ギャラリーなど) がある場合、それらは競合が発生する可能性があります。たとえば、ユーザーは別のリンクをクリックするつもりが、誤ってボタンを押してしまう可能性があります。この場合、この状況を回避するにはタッチを無効にする必要があります。

2. 誤操作を避ける

ユーザーは、削除ボタンや設定ボタンなどのデリケートな部分に誤って触れてしまう可能性があります。この誤操作を避けるためにはタッチを無効にする必要があります。

3. パフォーマンスの向上

場合によっては、タッチを無効にするとパフォーマンスが向上することがあります。たとえば、非常に大きなギャラリーやテーブルがある場合、スワイプするとページが途切れたりクラッシュしたりする可能性があります。この場合、タッチを無効にすると、ページの応答性が向上します。

タッチを無効にするにはどうすればよいですか?

JavaScript では、次のメソッドを使用してタッチを無効にすることができます。

1. CSS の使用

CSS の touch-action プロパティを使用してタッチを無効にできます。 。この属性には次のオプションがあります:

• auto: ブラウザはタッチ イベントを自由に処理できます。
• none: ブラウザはタッチ イベントを処理しません。
• pan-x: 水平方向の移動を許可します。
• pan-y: 垂直方向の移動を許可します。
• 操作: 2 本指タッチによるズームとパンのサポート。

次のコードは、ページ全体のタッチ イベントを無効にできます:

body {
    touch-action: none;
}

特定の要素のタッチ イベントのみを無効にしたい場合は、次の手順を実行できます:

.el {
    touch-action: none;
}

2. JavaScript の使用

#さらに制御が必要な場合は、JavaScript を使用してタッチを無効にすることができます。次のコードは、ページ全体のタッチ イベントを無効にすることができます:

document.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
document.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

特定の要素のタッチ イベントのみを無効にしたい場合は、次のように実行できます:

var el = document.getElementById('el');
el.addEventListener('touchstart', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchmove', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });
el.addEventListener('touchend', function(e) {
    e.preventDefault();  // 阻止默认事件
}, { passive: false });

上記のコードでは、私たちは、preventDefault() メソッドを使用してタッチ イベントのデフォルト動作を防止し、それによってタッチを無効にします。

preventDefault() メソッドが確実に有効になるように、イベント リスナーにオプションとして { Passive: false } を渡していることに注意してください。このオプションが設定されていない場合、preventDefault() メソッドが機能せず、タッチが無効にならない可能性があります。

概要

この記事では、JavaScript を使用してタッチを無効にする方法について説明します。ニーズに応じて、CSS または JavaScript を使用してタッチを無効にすることができます。いずれにしても、Web サイトまたはアプリケーションが適切に機能するようにするには、タッチを無効にするすべてのシナリオを慎重に検討する必要があります。

以上がJavaScriptを無効にしてタッチを無効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。