修复Bill Splitter按钮选中异常：仅点击其他按钮才取消选中

核心思路是只在小费按钮的点击事件内部处理选中状态切换，移除对整个文档的点击监听，这样就不会出现点击任意区域取消选中的情况。以下是具体实现步骤和代码：

1. 参考HTML结构 #

<div class="tip-container">
  <button class="tip-btn">5%</button>
  <button class="tip-btn">10%</button>
  <button class="tip-btn">15%</button>
  <button class="tip-btn">20%</button>
</div>

给所有小费按钮统一加一个类名（比如tip-btn），方便批量获取元素。

2. JavaScript 实现代码 #

// 获取所有小费按钮元素
const tipButtons = document.querySelectorAll('.tip-btn');
// 记录当前处于选中状态的按钮
let activeTipButton = null;

// 遍历每个按钮，绑定点击事件
tipButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 如果你之前给document绑定了点击取消选中的事件，先移除它
    // document.removeEventListener('click', 之前的取消选中函数名);

    // 情况1：点击的是已选中的按钮，允许取消选中（可选逻辑）
    if (activeTipButton === this) {
      this.classList.remove('active');
      activeTipButton = null;
      // 这里可以加取消选中小费后的计算逻辑
      return;
    }

    // 情况2：点击的是未选中的按钮，切换选中状态
    // 先取消之前选中按钮的状态
    if (activeTipButton) {
      activeTipButton.classList.remove('active');
    }
    // 给当前按钮添加选中样式
    this.classList.add('active');
    activeTipButton = this;

    // 执行小费计算逻辑（替换成你自己的计算代码）
    const tipPercentage = parseFloat(this.textContent.replace('%', ''));
    calculateTotal(tipPercentage);
  });
});

// 示例计算函数（根据你的实际逻辑修改）
function calculateTotal(tipPercent) {
  // 这里写你的账单拆分、小费计算逻辑
  console.log(`当前选中小费比例：${tipPercent}%`);
}

3. 为什么你之前用contains没成功？ #

大概率是因为你监听了document的点击事件，判断时没有正确处理事件目标的嵌套情况——比如按钮内部有<span>等子元素，e.target会是子元素而不是按钮本身，这时候需要用按钮元素的contains方法判断点击目标是否在按钮内部：

// 如果你一定要保留全局点击监听（不推荐），可以这样修正contains判断
document.addEventListener('click', function(e) {
  let isClickOnTipBtn = false;
  tipButtons.forEach(btn => {
    if (btn.contains(e.target)) {
      isClickOnTipBtn = true;
    }
  });
  // 只有点击不在小费按钮上时才取消选中（但这不符合你的需求，你需要的是只有点其他按钮才取消）
  if (!isClickOnTipBtn && activeTipButton) {
    activeTipButton.classList.remove('active');
    activeTipButton = null;
  }
});

不过这个方案不符合你的需求，所以更推荐前面的第一种方法——只在按钮内部处理选中切换，完全不需要全局点击监听。

4. 样式补充（可选） #

给选中的按钮加个样式，方便用户识别：

.tip-btn.active {
  background-color: #26c0ab;
  color: white;
}

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