※ただのメモ帳＆他ブログの紹介です。

こんにちは〜

今日はjavascriptで、cssでいうhoverのイベントをセットしようとした時に、想像していたのと違う挙動が出たので、調べていると出てきたサイトの紹介です。

まずは今回のハマったコードをご覧ください。

<div id="div_id">
    <a href="example.com/">
        url
    </a>
</div>
<script>
document.getElementById("div_id").addEventListener("mouseover",(e)=>{console.log(e);});
</script>

これを実行してみると、logに出てくるのはなぜかaタグの情報。

しかも、divタグでも呼ばれるらしく、カーソルを外した時にも呼ばれるというよく分からない状態になりました。

それで、調べてみると、下記サイトが。

イベントがどのタイミングで発火されるかを可視化してくれているサイトです。

これでみてみると、どうやらmouseoverは内部のDomに連携して外のDomも呼ばれるらしい。

ということで、内部にもある場合は、mouseoverではなくmouseenterを使った方がいいのだとか。

ではまた〜