![takashi-miyazaki-q2bHGRyJH64-unsplash.jpg](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fai4vjpehjr3j%2F4oKHFwCSzsEMQ59tRjhR2i%2F658e99ea6d31c23fc72b06363f1373ae%2Ftakashi-miyazaki-q2bHGRyJH64-unsplash.jpg&w=3840&q=75)
Chrome × ReactでonMouseLeaveがうまく動かない問題
![Kazuki Moriyama](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fai4vjpehjr3j%2F2Oa6QzkYOe51LQiER7VEtN%2F6e819c38a98a1c649401b86861c40d53%2Fimage.png&w=96&q=75)
Kazuki Moriyama (森山 和樹)
問題
svg要素を包むコンポーネントにonMouseLeaveを指定してコンポーネントから出たときにアクションを発火させたかったのだがうまく動かなかった。
具体的には素早くカーソルを動かすと、イベントを拾ってくれないようで想定した挙動が起こらないというものだ。
解決策
https://github.com/facebook/react/issues/4492#issuecomment-426356566
このissueのコメントのやり方で治った。
2つ挙げられているうちの2つ目で、svgを包む要素に pointer-events: none
を指定すればいいとのこと。