点击.btn移除.active类遇事件冲突的技术问题咨询

嘿，我一眼就看出问题出在哪了——事件冒泡搞的鬼！你的.btn是.item的子元素对吧？当你点击.btn的时候，事件会从子元素冒泡到父元素的.item点击事件里。也就是说，你写的.btn事件刚把父.item的.active移除，紧接着.item的点击事件又触发了，把当前.item的.active加了回来，所以看起来移除操作没生效。

咱们来修复这个问题，有两种靠谱的方案：

方案一：阻止事件冒泡 #

直接在.btn的点击事件里阻止事件向上冒泡，这样父元素.item的点击事件就不会被触发了：

$(".item").on("click", function() { 
  $(".item").removeClass("active"); 
  $(this).addClass("active"); 
});

$(".btn").on("click", function(event) { 
  // 阻止事件冒泡到父级.item
  event.stopPropagation();
  $(this).parent(".item").removeClass("active"); 
});

方案二：在父元素事件里判断点击目标 #

如果不想完全阻止冒泡（比如.btn还有其他上层事件需要触发），可以在.item的点击事件里判断，点击的是不是.btn或者它的子元素，如果是就跳过添加.active的逻辑：

$(".item").on("click", function(event) { 
  // 检查点击目标是否是.btn或.btn的后代元素
  if ($(event.target).closest(".btn").length) {
    return; // 直接返回，不执行后续的添加active逻辑
  }
  $(".item").removeClass("active"); 
  $(this).addClass("active"); 
});

$(".btn").on("click", function() { 
  $(this).parent(".item").removeClass("active"); 
});

这两种方案都能解决你的问题，选哪种看你实际的业务场景啦～

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