事件委托,如何准确限制事件发生在想要发生的元素上 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-06-20 18:33:07 1434 1
<ul class="buy-list">
     <li class="item">
        <div class="sour-price">
           <div class="source">京东商城</div>
           <div class="price">¥1140</div>
        </div>
        <div class="desc-buylink">
           <div class="desc">京东商城</div>
           <div class="buylink">购买</div>
        </div>
     </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,一直往上找吧?

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:44:27

    首先要用 addEventListener 而不用 onclick, onclick只能绑定一个事件,前者可以绑定多个。

    明确的回答你用jQuery,其中有相应的用法,.on()

    搞清楚了 DOM 事件处理流程,其实永原生 JS 解决问题也不难。
    screenshot

    0 0
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载