JavaScript中mouseleave事件触发时仅保留dpkCursor类移除其余类的最佳方案

核心思路是不出现类名空窗期，直接过滤保留需要的dpkCursor类，移除其余所有类，避免触发不必要的样式重绘导致闪烁。

方案1：遍历classList逐个移除（兼容性最好，逻辑清晰） #

function resetCursor() {
  Array.from(dpkCursor.classList).forEach(className => {
    if (className !== 'dpkCursor') {
      dpkCursor.classList.remove(className)
    }
  })
}

优势： #

• 全程不会清空类名，没有样式断层的时间点，完全避免闪烁
• 不需要提前知晓其他动态添加的类名，适配所有后续新增的额外类场景
• 兼容所有支持classList的浏览器，无额外依赖

方案2：直接改写className为过滤后结果（写法更简洁） #

function resetCursor() {
  dpkCursor.className = Array.from(dpkCursor.classList)
    .filter(className => className === 'dpkCursor')
    .join(' ')
}

优势： #

• 代码更精简，仅一次DOM属性赋值操作
• 同样不存在类名空窗期，不会触发闪烁

注：你原有代码里dpkCursor.classList.add(dpkCursor)属于错误写法，add方法需要传入字符串类型的类名，你传入了DOM元素对象，本身就会导致类名添加失败。

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