Javascript Mouseover пузырится от детей - PullRequest
Новая
       26

Javascript Mouseover пузырится от детей

4 голосов
/ 15 марта 2010

У меня есть следующие настройки HTML: 

<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>

это стиль, так что вы не можете навести курсор мыши на div1 без наведения одного из двух других элементов div. Теперь у меня есть указатель мыши на div1.
Проблема в том, что мой div1.mouseout срабатывает, когда я перехожу с content1 на content2, потому что их мышиные пузырьки.
и свойства target, currentTarget или relatedTarget события никогда не равны div1, поскольку они никогда не отображаются напрямую ...
Я безумно искал это, но я могу найти только статьи и решения проблем, которые противоположны тому, что мне нужно. Это кажется тривиальным, но я не могу заставить его работать ...
Мышь div1 должна срабатывать ТОЛЬКО, когда мышь покидает div1.

Одной из возможностей было бы установить некоторые данные при вводе мышью и отпускании мыши, но я убежден, что это должно работать из коробки, так как это просто мышка ...

EDIT: 

bar.mouseleave(function(e) {
                if ($(e.currentTarget).attr('id') == bar.attr('id')) {
                    bar.css('top', '-'+contentOuterHeight+'px');
                    $('#floatable-bar #floatable-bar-tabs span').removeClass('active');
                }
            });

изменил указатель мыши на mouseleave, и код сработал ...

Ответы [ 2 ]

11 голосов
/ 15 марта 2010

Вместо этого используйте событие mouseleave или mouseout, оно решит вашу конкретную проблему. Подробнее см. Здесь

Из документов на разницу:

Событие mouseleave отличается от mouseout тем, как оно обрабатывает всплытие событий. Если в этом примере использовались указатели мыши, то при перемещении указателя мыши из элемента «Внутренний» обработчик срабатывает. Это обычно нежелательное поведение. Событие mouseleave, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает элемент, с которым она связана, а не потомок. Таким образом, в этом примере обработчик срабатывает, когда мышь покидает элемент Outer, но не элемент Inner.

Пример разметки: 

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
2 голосов
/ 15 марта 2010

Метод hover имеет два параметра: первый для мыши и второй для мыши. 

$('your_div').hover(function(){
  // your code here.
}, function(){// any mouse out code here})
...