如何避免触发jQuery选择器中子元素的点击事件？

嘿，我来帮你搞定这个事件绑定的小难题！你想要给.pull-left区域绑定事件，但不想让点击里面的.name链接时触发逻辑，对吧？这里有两种靠谱的解决方案，你可以根据自己的场景选择：

方法一：绑定事件时直接排除目标元素 #

利用jQuery的:not()选择器，在绑定事件的时候就指定只响应.pull-left下非.name的元素触发的事件：

$('.pull-left').on('click', ':not(.name)', function() {
  // 这里写你要执行的事件逻辑，比如调用resize函数
  $event.chatwindow.resize.call(this);
});

这个方法逻辑直接，绑定阶段就过滤掉了.name元素，点击.name不会触发事件，而点击.pull-left的空白区域或者其他子元素（比如那个<span>图标）都会正常触发。

方法二：在事件处理函数内判断并终止执行 #

如果你的.name元素里面还有嵌套子元素，或者需要更灵活的判断逻辑，推荐用这种方法：在事件触发后，先检查点击的目标是不是.name或者它的后代元素，是的话就直接终止执行：

$('.pull-left').on('click', function(e) {
  // 检查点击的元素是否属于.name区域
  if ($(e.target).closest('.name').length) {
    return; // 终止后续逻辑执行
  }
  
  // 这里写你的核心逻辑，比如原有的resize操作
  let _this = $(this),
      chatwindow = _this.closest('.chat-window'),
      body_content = chatwindow.find('.body-content');
  // ... 你的resize具体逻辑代码
});

e.target是实际被点击的DOM元素，closest('.name')会向上查找最近的.name父元素，如果找到（length > 0），说明点击的是.name区域内的内容，直接return就不会执行后面的逻辑了。

结合你给出的代码结构，把判断逻辑整合进去后，你的$event.chatwindow对象可以改成这样：

$event.chatwindow = {
  resize: function () {
    let _this = $(this),
        chatwindow = _this.closest('.chat-window'),
        body_content = chatwindow.find('.body-content');
    // ... 你的resize具体逻辑
  },
  
  initPullLeftEvent: function() {
    $('.pull-left').on('click', function(e) {
      // 排除.name区域的点击
      if ($(e.target).closest('.name').length) {
        return;
      }
      // 调用resize逻辑，同时保证this指向正确
      $event.chatwindow.resize.call(this);
    });
  }
};

// 记得初始化事件绑定
$event.chatwindow.initPullLeftEvent();

内容的提问来源于stack exchange，提问作者user9235753