CSS プロパティ touch-action を使用すると、ユーザーによる要素の操作方法を制限できます。これは、不要なイベントのディスパッチを防ぐうえで特に役立ちます。
Chrome のバージョン 55 より前では、要素のスクロール方向を一方向に制限する 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 が追加されました。これらのプロパティの動作には微妙ながらも重要な違いがあります。
これらのプロパティは、要素が応答する前に、ユーザーは一方向にジェスチャーを開始する必要があります。これは、ユーザーが画面を下方向にジェスチャーした場合にのみ反応する「下にスワイプして更新」の操作に似ています。
次の動画では、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 を使用して実装する必要があるロジックの一部を簡素化できます。