Как отключить события мыши, вызванные дочерними элементами?

Question

Опишите проблему подробно:

Я хочу показать абсолютное положение div при наведении указателя мыши на элемент. Это очень просто с jQuery и работает отлично. Но когда мышь переходит через один из дочерних элементов, она запускает событие mouseout из содержащего div. Как заставить javascript запускать событие mouseout содержащего элемента при зависании дочернего элемента.

Какой лучший и самый короткий способ сделать это с помощью jQuery?

Вот упрощенный пример, чтобы проиллюстрировать, что я имею в виду:

Html:

<a>Hover Me</a> 
<div> 
    <input>Test</input> 
    <select> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    </select> 
</div> 

Javascript/JQuery:

$('a').hover(function() { $(this).next().show() } 
       function() { $(this).next().hide() }); 

Answer 1

Вопрос немного старый, но я столкнулся с этим на днях.

Самый простой способ сделать это с последними версиями JQuery является использование mouseenter и mouseleave события, а не mouseover и mouseout.

Вы можете проверить поведение быстро с:

$(".myClass").on({ 
    'mouseenter':function() { console.log("enter"); }, 
    'mouseleave':function() { console.log("leave"); } 
}); 

Answer 2

Ради простоты, я бы просто реорганизовать HTML ~ бит, чтобы поместить вновь отображаемый контент внутри элемента, к которому привязано событие привязки:

<div id="hoverable"> 
    <a>Hover Me</a> 
    <div style="display:none;"> 
    <input>Test</input> 
    <select> 
     <option>Option 1</option> 
     <option>Option 2</option> 
    </select> 
    </div> 
</div> 

Тогда вы могли бы сделать что-то вроде этого:

$('#hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

---

Примечание: Я не рекомендую встроенный CSS, но это было сделано, чтобы сделать пример легче переваривается.

Answer 3

Способ, которым я обычно рассматривал эту обработку, заключается в задержке около 1/2 секунды между перемещением мыши из элемента HoverMe. При перемещении мыши в наведенный элемент вам нужно установить некоторую переменную, которая сигнализирует о том, что вы нависаете над элементом, а затем в основном остановите зависающую часть от скрытия, если эта переменная установлена. Затем вам нужно добавить аналогичную функцию скрытия OnMouseOut из зависающего элемента, чтобы она исчезла при удалении мыши. Извините, я не могу дать вам какой-либо код или что-то более конкретное, но я надеюсь, что это укажет вам в правильном направлении.

Answer 4

Я просто проверяю, находится ли координата мыши вне элемента в событии mouseout.

Это работает, но это много кода для такой простой вещи :(

function mouseOut(e) 
{ 
    var pos = GetMousePositionInElement(e, element); 
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y) 
    { 
     RealMouseOut(); 
    } 
    else 
    { 
     //Hit a child-element 
    } 
} 

Код вырублен для удобства чтения, не будет работать из коробки.

Answer 5

Вы ищете JQuery эквивалент в JavaScript предотвращения пузырения событий

Проверьте это:.

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

В основном вам нужно поймать событие в дочерних узлах DOM и остановить их распространение в дереве DOM. Другой способ, хотя на самом деле не предлагается (поскольку он может серьезно нарушать существующие события на вашей странице), заключается в том, чтобы установить захват событий на определенный элемент на странице, и он получит все события. Это полезно для поведения DnD и т. Д., Но определенно не для вашего случая.

Answer 6

Я согласен с Райаном.

Ваша проблема в том, что «следующий» div не является «дочерним» из A. Невозможно, чтобы HTML или jQuery знали, что ваш элемент «a» связан с дочерним div в DOM. Обертывание их и наложение зависания на обертку означает, что они связаны.

Обратите внимание, что его код не соответствует лучшим практикам. Не устанавливайте скрытый стиль внутри элементов; если пользователь имеет CSS, но не javascript, элемент будет скрыт и не сможет быть показан. Лучшая практика заключается в том, чтобы поместить это объявление в событие document.ready.

Answer 7

Это старый вопрос, но он никогда не устаревает. Правильный ответ должен быть указан bytebrite.

Я хотел бы только указать разницу между mouseover/mouseout и mouseenter/mouseleave. Вы можете прочитать полезное объяснение here (перейдите в самую нижнюю часть страницы для рабочей демонстрации). Когда вы используете mouseout, событие останавливается, когда мышь входит в другой элемент, даже если это дочерний элемент. С другой стороны, когда вы используете mouseleave, событие не запускается, когда мышь контролирует дочерний элемент, и это поведение, которое OP хотел бы достичь.

Answer 8

Yeap, ребята, использовать .mouseleave вместо .mouseout:

$('div.sort-selector').mouseleave(function() { 
    $(this).hide(); 
}); 

Или даже использовать его в сочетании с live:

$('div.sort-selector').live('mouseleave', function() { 
    $(this).hide(); 
}); 

Answer 9

Я решил эту проблему, добавив pointer-events: none; на моих дочерних элементов CSS