Цель события jQuery ul - могу ли я найти li, который на самом деле является целью события?

#javascript #events #target #jquery

#javascript #Мероприятия #цель #jquery

Вопрос:

 $("#slider ul").hover(function(){
  //do something
});

Есть ли способ узнать, на каком дочернем элементе ( li ) на самом деле был наведен курсор, чтобы заставить эту функцию работать?

Это длинная функция, которая, когда изначально была написана как $("#slider ul li") etc, работала, но только при полном выходе из области ползунка ul . Мне нужно, чтобы это работало при переходе от одного li непосредственно к соседнему li и т.д.

Ответ №1:

 $("#slider ul").hover(function(evt){ 
   var targetElement = evt.target;
   // do something
});

По сути, наведение курсора jQuery позволяет передать событие. Это событие содержит целевой элемент, который вызвал событие.

1. @John: Но дает ли это доступ к дочернему элементу li? Похоже, OP хочет li, на котором была наведена мышь.

2. Поскольку событие прослушивается в ul, не является ли цель исходным ul?

3. @Cybernate @sydlawrence Исходная цель — это элемент, который был наведен. Затем событие переходит к родительскому элементу и продолжает работать до тех пор, пока не достигнет тела. Это то, что позволяет делегировать jQuery и выполнять текущие события. Взгляните на этот простой пример jsfiddle.net/bRZCn

4. В этом решении targetElement возвращает один конкретный li, который был наведен?

5. @Sarah ..yes evt.target сообщит о LI, который был наведен.

Ответ №2:

Звучит так, как будто вы пытаетесь сделать 2 отдельные вещи… одна вещь при ul наведении, а затем еще одна при li наведении

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

 var slider = $('#slider ul');

slider.hover(function(){ /* do something*/ });
slider.find('li').hover(function(){ /* do something else with $(this) */ });

Ответ №3:

Другой вариант

Попробуйте это:

 $("#slider ul").delegate("li", "mouseover", function(e){   
    var el = e.target;
   //do something
});

Рабочий пример:http://jsfiddle.net/hpJJz /