Как отключить события mouseOut, инициированные дочерними элементами?
Это способ динамически установить значение
var jsonVariable = {};
for (var i = 1; i < 3; i++) {
var jsonKey = i + 'name';
jsonVariable[jsonKey] = 'name' + i;
}
6 ответов
Вопрос немного устарел, но я столкнулся с ним на днях.
Самый простой способ сделать это в последних версиях jQuery - использовать события mouseenter и mouseleave , а не mouseover и mouseout .
Вы можете быстро протестировать поведение с помощью:
$(".myClass").on( {
'mouseenter':function() { console.log("enter"); },
'mouseleave':function() { console.log("leave"); }
});
Для пользы простоты я просто реорганизовал бы HTML немного для помещения недавно отображенного содержания в элементе, с которым связывается событие mouseOver:
<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, но он был сделан для создания примера легче к обзору.
Вы ищете jQuery, эквивалентный из JavaScript, предотвращают распространение событий.
Проверяют это:
http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29
В основном необходимо поймать событие в детях узлы DOM, и там остановить их распространение дерево DOM. Иначе, хотя действительно не предложенный (поскольку это может сильно смешать с существующими событиями на Вашей странице), должен установить получение события на определенный элемент на странице, и это получит все события. Это полезно для поведения DnD и такого, но определенно не для Вашего случая.
Я просто проверяю, ли координаты мыши вне элемента в событии 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
}
}
Код, сокращенный для удобочитаемости, не будет работать из поля.
Путем я обычно видел, что это обработало, должен иметь задержку приблизительно 1/2 второй между перемещением мыши от элемента HoverMe. При перемещении мыши в колебавшийся элемент Вы хотели бы установить некоторую переменную, которая сигнализирует, что Вы нависаете над элементом, и затем в основном мешаете колебавшейся части скрыться, если эта переменная установлена. Тогда необходимо добавить, что подобное скрывает функциональный OnMouseOut от колебавшегося элемента, чтобы заставить его исчезнуть при удалении мыши. Извините я не могу дать Вам код или что-то более конкретное, но я надеюсь, что это указывает на Вас в правильном направлении.
Я соглашаюсь с Ryan.
Ваша проблема состоит в том, что "следующее" отделение не является "ребенком" A. Нет никакого пути к HTML или jQuery, чтобы знать, что Ваш "a" элемент связан с дочерним отделением в DOM. Обертывание их и помещение парения на обертке означают, что они связаны.
Обратите внимание на то, что его код не соответствует лучшим практикам, все же. Не устанавливайте скрытый стиль, встроенный на элементах; если у пользователя будет CSS, но не JavaScript, элемент скроется и не будет в состоянии быть показанным. Лучшая практика должна поместить то объявление в document.ready событие.