图标包含在button里面但是仅按图标会响应不了

Question

由于我是用了事件委托，把事件监听放在了父元素上，所以e.target那里指向的是button那里，而点击图标e.target就会指向i标签那里，那我是应该是再添加一个i的条件还是本身这样写有问题呢？因为是评论需要动态添加节点，所以选择了放在父元素上，求指点，非常感谢

  $articles.on('click', function(e) {
    btn = $(e.target);
    console.log(btn);
    //二级评论
    if (btn.is('.recomment_action .comment')) {
      var $recomment = btn.parents('.recomment');
      var $input = $recomment.children('input[type=text]');
      var val = '回复{{username}}:' + $input.val();
      $recomment.removeClass('active');
      var box = btn.parents('.comment_wrapper');
      addMessage(box, val);
      $input.val("");
    }
    //一级评论
    if (btn.is('.comment_action .comment')) {
      var $input = btn.parent().prev(".add_comment input[type=text]");
      var val = $input.val();
      var $add_comment = $(btn.parents('.add_comment'));
      var box = $add_comment.prevAll('.comment_wrapper');
      addMessage(box, val);
      $input.val("");
    }
    else if (btn.is('.comment_btn')) {
      changeUI(btn.parents().next('.recomment'));
    }
    else if (btn.is('.like_btn')) {
      changeUI(btn);
    }
    else if (btn.is('.dislike_btn')) {
      changeUI(btn);
    }
    else if (btn.is('.collect_btn')) {
      changeUI(btn);
    }
  })
}

Answer 1

已经使用了事件委托，jquery的on不是可以在父级上给子元素绑定事件吗？
可以考虑使用event.currentTarget、event.target结合事件委托来实现。

$btn.on(''click','.i,.icon',function(e){
    e.target //是触发事件的元素
    e. currentTarget // 监听事件的元素
})

两者区别：https://segmentfault.com/a/11...

Answer 2

e.target是你直接点到的那个元素。
所以你应该再写一个函数。
此函数顺着e.target向父级逐层遍历，遍历至目标元素或$articles时终止。
由此判断到底该触发哪块逻辑。