#jquery #event-bubbling
#jquery #событие-пузырьки
Вопрос:
У меня большой DIV # bigdiv. При наведении на него курсора я хочу, чтобы внутри большого div появлялся небольшой информативный DIV #info. Проблема: когда я навожу курсор мыши на #info (как только я заставил его появиться, наведя указатель мыши на #bigdiv), это заставляет его (#info) появляться и исчезать бесконечно. Вот мой код :
jQuery('#bigdiv').live("hover", function(){
jQuery("#info").toggle();
});
Обновить
Я попробовал решение mashappslabs (mouseenter / mouseleave), и я попробовал решение Ти Джея Краудера (не использовать live ()) : тот же результат.
В обоих случаях маленький div все еще появляется и исчезает навсегда.
Комментарии:
1. Можете ли вы опубликовать свой HTML-и css-код. Ваш код работает для меня. jsfiddle.net/ynhat/XZN5s
2. @YNhat: Да, это было бы полезно. 🙂 Я могу воспроизвести подобное поведение в примере, связанном с моим ответом, но только @glabus может сказать нам, такое ли поведение он / она видит.
3. @dandan @glabus: тогда какая-то другая часть вашего кода работает неправильно, этот пример, который я опубликовал для вас, работает jsfiddle.net/2aCJ2 , посмотрите на код, в котором сочетаются CSS, HTML и jQuery, и, возможно, опубликуйте здесь больше вашего кода, если вам нужна дополнительная помощь. Приветствия.
Ответ №1:
Похоже, что это незначительная ошибка в live версии hover . Сравните этот пример, используя live , с этим, использующим фактически включенный обработчик событий bigdiv (счетчик есть, чтобы мы знали, когда что-то меняется). Проблема заключается в том, что вы перемещаете мышь в info div (слово «info») и из него (все еще внутри bigdiv ). Таким образом, ответ может заключаться в том, чтобы не использовать live , хотя я предполагаю, что у вас есть причина для использования live , и поэтому это может быть неудобно.
Возможно, вы знаете, что hover это в основном просто комбинация mouseenter и mouseleave (которые являются специфичными для IE событиями, но jQuery эмулирует их в браузерах, которые их не предоставляют). Но mouseenter и mouseleave не пузырятся; это часть того, почему они полезны. Однако связанные (и не зависящие от IE) пузырьки mouseover и mouseout событий, так что, похоже, это может быть, являются ошибкой в mouseenter / mouseleave эмуляции, специфичной для делегированной обработки. (Редактировать: В частности, ошибка # 9069, о которой уже сообщалось и над которой активно работают.)
Комментарии:
1. Какой браузер вы используете? Оба примера отлично работают для меня (FF 4.0.1, Linux)
2. @nico: Обязательно наведите курсор мыши на слово info и снова выведите (но все еще в пределах поля). Я пробовал Chrome 10, Firefox 3.6, Opera 11 в Linux и IE6 и IE7 в Windows.
3. @T.J. Crowder: хорошо, теперь я вижу проблему. Я неправильно понял исходный вопрос.
4. @nico: Возможно . Пока / если @glabus не вернется, мы действительно не знаем. 🙂
5. @TJCrowder: у меня сложилось впечатление, что он говорил, что маленький div продолжает появляться и исчезать навсегда. Тем не менее, вы все равно нашли интересную ошибку 😉
Ответ №2:
@glabus
сделайте позицию #info абсолютной
#info{
position:absolute;
top: 20px;
left:40px;
}
вы также можете динамически устанавливать top и left с помощью jquery.css
Комментарии:
1. Он не должен был этого делать.
2. … и в моем примере я этого не делаю. 🙂
Ответ №3:
Используйте mouseenter и mouseleave, проверьте рабочий пример наhttp://jsfiddle.net/2aCJ2 / и вот код: CSS:
#big {width: 500px; height:500px; border: 1px solid #ccc; padding: 10px;}
#info {display: none; border: 2px solid #ddd;}
HTML:
<div id="big">
<div id="info">
<p>Hello I'm visible</p>
</div>
</div>
jQuery:
$("#big")
.mouseenter(function(e) {
$("#info").show();
})
.mouseleave(function(e) {
$("#info").hide();
});
Надеюсь, это поможет. Приветствия