event.target указывает на дочерний элемент

Question

Когда пользователь нажимает на элемент <li> или на дочерний элемент, я хочу добавить класс к этому элементу <li>.

Это прекрасно работает, но для повышения производительности я решил связать это событие с элементом <ul>, поэтому отключение и привязка этого события происходит намного быстрее в списке, состоящем из 1000 <li> -элементов. Единственное изменение, которое я думал, что мне пришлось сделать, это заменить на event.target. НО event.target может также ссылаться на дочерний элемент элемента списка или даже на внука.

Есть ли простой способ проверить этот целевой элемент является частью элемента списка или мне нужно пройти путь от event.target до достижения элемента <li>?

Это то, что я имел, прежде чем я решил связать событие с <ul> тег, который работает, но не достаточно быстро:

$('#list li').mousedown(function(){ 
    $(this).addClass('green'); 
}); 

И это то, что у меня сейчас, не работает должным образом, MouseDown на дочерний элемент не дает <li> другой: имя класса

$('#list').mousedown(function(event){ 
    if(event.target.nodeName == 'LI'){ 
     $(event.target).addClass('green'); 
    } 
}); 

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

Answer 1

Ну, вы могли бы сделать все это с помощью JQuery на инструмент:

$('#list li').on('mousedown', function() { 
    $(this).addClass('green'); 
}); 

Вы можете прочитать о том, что на делает здесь: http://api.jquery.com/on/

Answer 2

Вам нужно проверить, есть ли тег LI в родителях целевого элемента.

Все общие рамки есть способ определения того, является up() в прототипе, ancestor() в YUI3, и, глядя на документы JQuery, кажется, что он имеет parent() и parents() функция, которую вы можете использовать для этого ,

См: http://docs.jquery.com/Traversing

Не использовали JQuery, но я предполагаю, что проверка на $(event.target).parent('li') ответ.