Eventオブジェクトからクリックされた要素を取得する時はtargetではなくcurrentTarget を使う

MouseEventのtargetプロパティはクリック・タップされた「まさにその要素」を指し示す。

もしクリック・タップされた要素の中に別の要素が入れ子になっていて、ユーザーがクリックしたのがその入れ子の要素だったとすると、targetプロパティではその入れ子要素が行方不明になる。

イベントハンドラを登録した当の要素を取得するにはcurrentTargetを利用する。

stopPropagationはCSSの!importantと似たようなもの

CSSの!importantを無闇に指定してはいけないのと同様に、stopPropagationは最後の手段として取っておくべき。

具体的な例を挙げると、ページの他の部分にモーダルのコンポーネントがあったとする。コンポーネントはクリックで開閉する機能とコンポーネントの外側をクリックすると閉じる機能を持っている。

この「コンポーネントの外側をクリックすると閉じる」機能は典型的には以下のようなコードで実装することが多い。

document.addEventListener("click", (e) => {
  if (!popup.element.contains(e.target)) {
    popup.close();
  }
});

このclickイベントハンドラが実行されるのは、clickイベントがバブリングして document まで到達した時。

stopPropagationはバブリングを止めてしまうので、こういうケースでは不具合になる。

原因の究明が難しくなりバグの温床になりがちなのでstopPropagationは原則使わないようにする。