cari

Rumah  >  Soal Jawab  >  teks badan

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

<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.parentNodetarget.parentNode.parentNode看看是不是li也是可以的,但老觉得这么写不优雅。假设li里的结构更加复杂的话,这样写就不行了,总不能N个parentNode,一直往上找吧?

巴扎黑巴扎黑2897 hari yang lalu715

membalas semua(13)saya akan balas

  • ringa_lee

    ringa_lee2017-04-10 17:03:26

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

    balas
    0
  • 大家讲道理

    大家讲道理2017-04-10 17:03:26

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

    balas
    0
  • 大家讲道理

    大家讲道理2017-04-10 17:03:26

    这样就可以了:

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

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

    balas
    0
  • Batalbalas