javascript - 事件委托，如何准确限制事件发生在想要发生的元素上

Question

<ul class="buy-list">
     <li class="item">
        <p class="sour-price">
           <p class="source">京东商城</p>
           <p class="price">￥1140</p>
        </p>
        <p class="desc-buylink">
           <p class="desc">京东商城</p>
           <p class="buylink">购买</p>
        </p>
     </li>
     ...
     ...
</ul>

上面的结构，ul下面有很多li，现在我把事件委托到ul上，

代码：

var buyList = document.querySelector('.buy-list');

buyList.onclick = function(e){
     
     var target = e.target;
     
     // 只有点击li才触发事件
     
     if(target.className.indexOf('item') !== -1){
      
          // do something       
     
     }
     

}

我想实现的效果是：点击li或li内部的任意一个元素，都会执行事件。

但是上面的写法只有当我点击li时才会执行do something,点击的是sour-price 或 price元素，都不会执行do something...

请问如何实现我想要的效果？

PS：当然，判断 target.parentNode 或 target.parentNode.parentNode看看是不是li也是可以的，但老觉得这么写不优雅。假设li里的结构更加复杂的话，这样写就不行了，总不能N个parentNode，一直往上找吧？

Answer 1

难道你的ul标签里还有不是li元素的直接子元素？？那就说明你的HTML就是不规范的

Answer 2

事件绑定在UL上，怎么让点击底下的每个LI执行不同的操作啊？

Answer 3

这样就可以了：

$('.buy-list').on('click','.item',function(){
    //do something...
});

可实现一次绑定给父元素$('.buy-list')下所有的目标子元素.item