【ハマログ】親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生する件 - KDE BLOG

表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。 事象 原因 最初のコード html css js 怪しいところを探る 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする マウスイベントを扱う場合は要素の領域はその直下の部分になる 今起きているイベントと対になるイベントが起こった要素を示すrelatedTarget プロパティ e.relatedTarget が null になる .btn の mouseout、mouseoverを制御する リファクタリング 参考 事象 言葉では説明しづらいので、キャプチャーを撮りました。 ざっくりいうと、GoogleChromeで、親要素（container）に設定していた mouseover、mouseout のイベントリスナーが子要素（btn）を連続でクリックしまくった時