1

ネストされたオブジェクトがある場合、マウスが通過するときに発生するイベントのタイミングは非常に直感的で複雑です。誰かがタイミングのルールを説明できますか？

たとえばdiv、次のようにをネストした場合：

ネストされたdiv

各divには、イベントを発生させるためのonmouseoverandonmouseoutプロパティがあり、次の順序で発生します。

  • マウスが動くとき1->2

    マウスオーバー2

  • マウスが動くとき2->3

    マウスアウト2
    マウスオーバー3
    マウスオーバー2

  • マウスが動くとき3->4

    マウスアウト3
    マウスアウト2
    マウスオーバー4
    マウスオーバー2
    マウスオーバー3

  • マウスが動くとき4->5

    マウスアウト2
    マウスオーバー5
    マウスアウト3
    マウスオーバー4
    マウスアウト4
    マウスオーバー3
    マウスオーバー2

  • マウスが動くとき5->4

    mouseout 5
    mouseout 4
    mouseover 3
    mouseover 4
    mouseout 2
    mouseout 3
    mouseover 2

  • マウスが動くとき4->3

    マウスアウト4
    マウスオーバー3
    マウスオーバー2
    マウスアウト3
    マウスアウト2

  • マウスが動くとき3->2

    マウスアウト3
    マウスアウト2
    マウスオーバー2

  • マウスが動くとき2->1

    マウスアウト2

特にFirefox9.0を使用しています。ウェブブラウザに違いがある場合はお知らせください。

4

1 に答える 1

1

mouseenterイベントとmouseleaveイベントを使用することを強くお勧めします。ネストされた要素を使用する場合、Mouseoverとmouseoutは注意が必要です。ドキュメントから：

マウスオーバーと同様に、バブルが発生せず、ポインタが物理空間とそのすべての子孫の1つから移動するまで送信されないという点で異なります。

また、私は使用することをお勧めします。ほとんどの場合、これらのバギーバブリング以外のイベントをバインドするjQueryHoverヘルパーを使用します。

于 2011-12-09T05:28:11.553 に答える