javascript - JSイベントのバブリングの問題

Question

事件は解決しました: この効果を実現するには CSS を使用してください。

ご協力ありがとうございます。この効果を実現するために CSS に切り替えました。

1. 次のコードでは、a タグのマウスオーバー イベントとマウスアウト イベントをリッスンして、キャンバス アニメーションをトリガーしました。マウスオーバーとマウスアウトのコールバックでイベントがバブリングするのを防ぎましたが、マウスが 2 つのタグに移動すると、 a の内部のスパン a のマウスアウトは引き続きトリガーされ、 a に戻るとマウスオーバーが再トリガーされるため、アニメーションが中断され、繰り返し実行されます。

次のコードのどこが間違っているのかを教えていただけますか?

補足アニメーション画像!

リーリー

Answer 1

试试这样
私に質問=>addEventListener

リーリー

Answer 2

1. まず、コードに問題があります。マウスをキャンバス上に置いたときにのみアニメーションがトリガーされます。

第二に、イベントのキャプチャはブロックできず、イベントのバブリングは子要素から親要素へ行われるため、stopPropagation() のアプリケーション オブジェクトは a

2. の子要素である必要があります。

マウスの出入りを監視したいだけなら、mouseenterイベントとmouseleaveイベントを使用するべきだと思います。ここを参照してください

Answer 3

ご協力ありがとうございます。この効果を実現するために CSS に切り替えました。