jQuery中移除clickable类后点击事件仍触发的问题咨询

嘿，这个问题我太熟悉了——答案是会的，而且原因其实和事件绑定的机制有关，咱们慢慢说：

核心原因：事件绑定在元素本身，而非类上 #

当你最初给带有clickable类的元素绑定点击事件时，是把事件处理函数直接附加到了这个DOM元素上，clickable类只是你用来选择要绑定事件的元素的条件，并不是事件触发的“开关”。

所以哪怕你之后移除了clickable类，这个元素上已经绑定的点击事件并不会自动消失，下次点击它依然会触发事件处理函数。

两种解决办法 #

如果你想实现“只有元素带有clickable类时才响应点击”的效果，有两种常用方案：

1. 在事件处理函数里先检查类的存在

每次触发点击事件时，先判断当前元素是否还拥有clickable类，没有的话直接跳过后续逻辑：

// 假设你是直接绑定到.circle元素上
const circleEl = document.querySelector('.circle');
circleEl.addEventListener('click', function() {
  // 先检查类是否存在
  if (!this.classList.contains('clickable')) {
    return; // 没有就直接返回，不执行后续操作
  }
  
  // 这里写你原本的处理逻辑，比如移除类
  this.classList.remove('clickable');
  console.log('执行点击逻辑');
});

2. 使用事件委托（更推荐）

把事件绑定到元素的父容器上，每次点击时再检查目标元素是否带有clickable类。这种方式的好处是，哪怕元素的类动态变化，也能实时判断：

// 绑定到上层的.item-wrap容器（或者更合适的父元素）
document.querySelector('.item-wrap').addEventListener('click', function(e) {
  // 找到点击事件源中最近的.circle元素
  const targetCircle = e.target.closest('.circle');
  
  // 只有当这个元素存在且带有clickable类时，才执行逻辑
  if (targetCircle && targetCircle.classList.contains('clickable')) {
    targetCircle.classList.remove('clickable');
    console.log('执行点击逻辑');
  }
});

这样一来，当你移除clickable类后，下次点击元素时，事件委托的检查会失败，就不会再执行对应的逻辑了。

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