押した瞬間に実行され、キャンセルできないボタン

pointerdown は、マウス、ペン、指がボタンに触れた瞬間に発生します。そのため、何を押したか確かめたり、指をずらしたりする前に商品が追加されます。タッチ操作では、ボタンの上で始めたスクロールのたびにも発生します。mousedown、touchstart、フレームワークの onMouseDown や onTouchStart も同じ理由で問題になります。

2つのリスナーを削除し、ボタン本来の click を使います。ブラウザーは、押すのも離すのもボタンの上だったときにだけ click を発生させます。そのため、離す前に外へずらせば取り消せ、スクロールに変わったタッチがクリックになることもありません。同じイベントが、フォーカスしたボタンでのEnterキーとSpaceキー、スクリーンリーダーのダブルタップ、音声操作でも発生するため、キーボード用のコードも不要になります。離したときに実行しても、遅くは感じません。押してから離すまでの時間は、利用者が判断に使う時間です。

押したときのリスナーは、処理を完了させない限り使ってかまいません。次の使い方はよくあり、問題ありません。

• 押下中の見た目：CSSの :active ならスクリプトは不要です。pointerdown で波紋を描いても、処理が click を待つなら問題ありません。
• フォーカスの維持：候補の一覧を mousedown で選ぶのは、多くの場合、検索欄のフォーカスが先に外れて一覧が閉じるのを防ぐためです。mousedown は残し、event.preventDefault() でフォーカスの移動を止めるだけにして、候補は click で選びます。一覧のそれ以外の作りは「候補を読み上げず、キーボードで選べないオートコンプリート」で説明しています。
• ドラッグの開始：ドロップは離したときに起こり、どこにも置けない場所で離したら、項目を元の位置に戻します。ドラッグ以外の移動方法は「マウスでしか動かせないドラッグ＆ドロップのボード」で説明しています。
• 長押し：押している間だけプレビューを表示し、離すと消えるものは問題ありません。離したときに押した結果を打ち消しているからです。「長押しで削除」のように何かを確定させる長押しは、離したときに完了させ、ポインターが外れたら取り消します。

修正に見えても、修正にならないものもあります。pointerup、mouseup、touchend はアップイベントですが、取り消しができません。Chromiumでは、指でページをスクロールした後でも、ボタンで touchend が発生します。マウスの場合、別の場所で押してからボタンの上へ移動して離すと、そのボタンで pointerup が発生します。普通のボタンで setPointerCapture() を使うと、離したイベントがボタンに戻され、遠く離れた場所で離しても、ブラウザーはボタンで click を発生させます。キャプチャーは、本当にドラッグするものだけに使ってください。

コンポーネントライブラリでは、これを押下イベントとしてまとめていることがよくあります。「押し始め」のイベントではなく、onPress のように要素の上で離したときに発生するものを使い、名前を信じずに、外へずらすテストで確かめてください。リンクは対応不要です。リンクをたどる動作はもともとクリックです。削除や支払いのように影響が残る処理では、離したときに実行するだけでは守りとして弱いため、元に戻す方法や確認も加えてください。