Трудно объяснить, странная проблема при наведении курсора на JavaScript

Question

У меня есть ящик (черный окаймленный). У меня есть обработчик для трансляции события mouseout этой коробки. Проблема заключается в том, что при наведении курсора мыши на элемент, скажем, div внутри этого поля (красная рамка и синяя рамка). mouseout или указатель мыши для события с черной рамкой запускается.

Я гуглю три дня, но не нашел решения этой проблемы. Почему событие mouseleave / out вызывается внутри блока, поскольку мышь находится внутри его границы. Позиция div является «абсолютной». Я пытался с ядром JavaScript и JQuery.

Answer 1

jQuery's .live устарело, используйте .on

Кроме того, использование mouseout означает, что когда мышь покидает выделенный элемент ИЛИ любого из этих элементов потомков, событие инициируется. mouseleave применяется только к выбранному элементу.

  $('.nocMenuContainer').on('mouseleave',function(){     
       alert('bye');
  });

Answer 2

У меня была похожая проблема, но браузер ведет себя вполне нормально.События mouseenter и mouseleave не распространяются на все наложенные элементы dom, как вы ожидаете.
Для случаев, когда вам это нужно, я разработал небольшую библиотеку jQuery, которая называется superBind .
Как видно из примера, единственное отличие состоит в том, что вы связываете свои события с помощью метода superBind вместо обычных (bind, live,on .. и т. Д.).
Надеюсь, это поможет!

Answer 3

Хорошая документация на http://www.quirksmode.org/js/events_mouse.html#mouseover.. Это может помочь вам понять, почему событие вызывается при перемещении мыши внутри вашего окна;и он предлагает решение для различения внешних и внутренних движений.

Answer 4

Убедитесь, что на вашей кнопке нет другого селектора.Например, если у вас есть div с padding и тегом внутри, событие mouseleave будет срабатывать, когда ваша мышь перемещается из div в тег, даже если вы находитесь внутри.Решение?Добавьте рамку, указатель мыши и отступ непосредственно к тегу.