タップ操作のオプション

touch-action CSS プロパティを使用すると、ユーザーによる要素の操作方法を制限できます。これは、不要な場合にイベントがディスパッチされないようにする場合に特に役立ちます。

バージョン 55 より前、Chrome は要素を 1 方向のスクロールに制限する pan-x と pan-y をサポートしていました。

次の動画は、タップ操作が定義されていない要素（左）と、pan-x と pan-y（中央と右）の例を示しています。

中央と右側のスクリーンキャストの CSS は次のとおりです。

.pan-x {
    touch-action: pan-x;
}

.pan-y {
    touch-action: pan-y;
}

Chrome 55 では、pan-left、pan-right、pan-up、pan-down が追加されました。これらのプロパティには、動作に微妙ながら重要な違いがあります。

これらのプロパティを使用すると、要素が応答する前に、ユーザーが 1 つの方向にジェスチャーを開始する必要があります。これは、ユーザーが画面を下に操作した場合にのみ応答する「プルして更新する」操作に似ています。

次の動画は、それぞれ右から左と下から上に開始するジェスチャーを必要とする pan-right と pan-down を示しています。ジェスチャーを開始すると、実際に左右にパンできます。影響を受けるのは最初の方向のみです。

動画ではこの動作を示していますが、サンプルを確認すると、自分で簡単に試すことができます。

このデモの CSS は次のとおりです。

.pan-right {
    touch-action: pan-right;
}

.pan-down {
    touch-action: pan-down;
}

タップ操作の世界で最後に登場したのは pinch-zoom プロパティです。これは Chrome 55 の新しいプロパティで、フラグで保護されています。任意のパン オプション（pan-x、pan-y、pan-left、pan-right、pan-down、pan-up）で使用できます。

ウェブサイトをピンチすると、通常はページのコンテンツが拡大されます。 touch-action を定義するとこの動作は防止されますが、ピンチ操作でズームするとこの動作が再び有効になります。

この動画では、touch-action: pan-x と touch-action: pan-x pinch-zoom の違いを示しています。

これらのプロパティはすべて、デベロッパーが pointer-events を使用して実装する必要のあるロジックの一部を簡素化します。