javascript - event.target 指向一个子元素

Question

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

这工作正常，但为了提高性能，我决定将此事件绑定(bind)到 <ul> - 元素，因此在包含 1000 <li> 的列表中取消绑定(bind)和绑定(bind)此事件要快得多-元素。我认为我必须做的唯一改变是替换 this与 event.target但是event.target也可以引用列表项的子元素甚至孙元素。

有没有一种简单的方法来检查这个目标元素是列表项的一部分，还是我需要从 event.target 走这条路？直到我到达 <li>元素？

这是我在决定将事件绑定(bind)到 <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 on 工具完成所有这些操作:

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

您可以在此处了解 on 的功能:http://api.jquery.com/on/