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 の使用

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 });

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