JavaScript/CSS按钮点击切换样式异常：双击无法恢复初始状态求助

原代码的核心问题 #

1. 错误操作了document.body的背景，而非按钮自身，和需求完全不符
2. 双击事件会触发两次单击事件，导致双击逻辑被覆盖
3. 完全没实现文本切换的显示/隐藏逻辑

修正后的完整代码 #

HTML

<button id="toggleBtn">
  <span class="text-hello">hello</span>
  <span class="text-hi" style="display: none;">hi</span>
</button>

CSS

/* 定义按钮渐变样式，用类管理更易维护 */
.btn-gradient {
  background: linear-gradient(orange, white, green);
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 给按钮加默认样式，效果更明显 */
#toggleBtn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript

const btn = document.getElementById('toggleBtn');
const helloText = btn.querySelector('.text-hello');
const hiText = btn.querySelector('.text-hi');
let clickTimer = null;

// 处理单击事件，用定时器区分双击
btn.addEventListener('click', () => {
  clearTimeout(clickTimer);
  clickTimer = setTimeout(() => {
    // 单击：切换到渐变背景和hi文本
    btn.classList.add('btn-gradient');
    helloText.style.display = 'none';
    hiText.style.display = 'inline';
  }, 250); // 250ms是常用的单击/双击区分阈值，可按需调整
});

// 处理双击事件
btn.addEventListener('dblclick', () => {
  clearTimeout(clickTimer); // 取消单击逻辑的执行
  // 双击：恢复初始状态
  btn.classList.remove('btn-gradient');
  helloText.style.display = 'inline';
  hiText.style.display = 'none';
});

关键说明 #

• 用setTimeout和clearTimeout解决单击、双击的事件冲突：双击时会先触发两次单击，通过清除定时器阻止单击逻辑执行，只保留双击逻辑
• 通过控制span的display属性实现文本切换，比修改innerHTML更高效
• 用CSS类管理按钮样式，比直接操作style属性更易维护和扩展

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