Время событий, когда мышь перемещается через перекрывающиеся или вложенные области

Question

Когда у меня есть вложенные объекты, время событий, которые происходят при прохождении мыши, очень противоречиво и сложно. Может кто-нибудь объяснить правила по срокам?

Например, когда я вложил div s, как показано ниже:

, где каждый div имеет свойства onmouseover и onmouseout, поэтому они запускают события в следующем порядке:

• Когда мышь двигается 1 -> 2

  Наведите курсор мыши на 2

• Когда мышь двигается 2 -> 3

  мышка 2
  наведение мышки 3
  наведение мыши 2

• Когда мышь двигается 3 -> 4

  мышка 3
  мышка 2
  наведение курсора 4
  наведение мыши 2
  наведение курсора 3

• Когда мышь двигается 4 -> 5

  mouseout 2
  наведение мыши 5
  мышка 3
  наведение курсора 4
  мышка 4
  наведение мышки 3
  наведение мыши 2

• Когда мышь двигается 5 -> 4

  мышка 5
  мышка 4
  наведение мышки 3
  наведение курсора 4
  мышка 2
  мышка 3
  наведение мыши 2

• Когда мышь двигается 4 -> 3

  мышка 4
  наведение мышки 3
  наведение мышки 2
  мышка 3
  мышка 2

• Когда мышь двигается 3 -> 2

  мышка 3
  мышка 2
  наведение мышки 2

• Когда мышь двигается 2 -> 1

  mouseout 2

Я особенно использую Firefox 9.0. Пожалуйста, дайте мне знать, если есть разница между веб-браузерами.

Answer 1

Я настоятельно рекомендую вам использовать mouseenter и mouseleave события. Mouseover и mouseout сложны при использовании вложенных элементов. Из документов:

Как и при наведении мыши, отличается тем, что не пузырь , и что он не отправляется, пока указатель не переместится из своего физического пространства и один из всех его потомков.

Также я рекомендую использовать и чаще всего использую jQuery Hover помощник, который связывает те события, не связанные с ошибками.