248 views
B!0X

Chrome × ReactでonMouseLeaveがうまく動かない問題

chrome-x-reactでonmouseleaveがうまく動かない問題

問題

svg要素を包むコンポーネントにonMouseLeaveを指定してコンポーネントから出たときにアクションを発火させたかったのだがうまく動かなかった。
具体的には素早くカーソルを動かすと、イベントを拾ってくれないようで想定した挙動が起こらないというものだ。

解決策

https://github.com/facebook/react/issues/4492#issuecomment-426356566

このissueのコメントのやり方で治った。
2つ挙げられているうちの2つ目で、svgを包む要素に pointer-events: none を指定すればいいとのこと。

関連事例

  • プロダクト / Web システム開発 / セキュリティ診断・対策

    事例:マルチプロダクトの共通認証基盤

    業務向けソフトウェアを提供する企業との取り組みです。同社はプロダクト共通の認証基盤の内製を開始しましたが、技術的な難しさから着手直後に断念しました。開発支援会社の KDOT はその開発を引き継ぎ、共通基盤を設計しました。AWS の認証サービスである Amazon Cognito による認証とトークン発行に、Go で実装した独自の認可サービスを組み合わせた構成です。現在は同社の 10近いプロダクトがこの基盤を共通で利用し、新たなプロダクトを追加するたびに認証を再構築する必要がなくなりました。KDOT は統括するチームでこの複雑な基盤を開発し、その上で機能追加と運用保守を数年にわたって継続しています。

開発の相談先をお探しですか。

この記事に関わることについてご相談がある方はお問い合わせください。

KDOT についてお問い合わせ