event.target指向子元素

Question

当用户点击<li> - 元素或其子元素时，我想在此<li>元素中添加一个类。

这很好，但是为了提高性能，我决定将此事件绑定到<ul> - 元素，因此在包含1000个<li> - 元素的列表中，解除绑定和绑定此事件要快得多。我认为我必须做的唯一更改是将this替换为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

您需要检查目标元素的父级中是否存在LI标记。

所有常见框架都有一种方法可以确定这一点，原型为up()，YUI3为ancestor()，查看JQuery文档，似乎它有一个{{1}您可以使用{和} parent()函数。

请参阅：http://docs.jquery.com/Traversing

没有使用过JQuery，但我认为检查parents()就是答案。

Answer 2

嗯，你可以使用jQuery on 工具完成所有这些：

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

您可以在此处了解 的内容：http://api.jquery.com/on/