点击.exitA按钮启动递增计时器，点击页面停止功能修复需求

问题根源 #

当前代码的问题是事件冒泡导致的：点击.exitA按钮时，点击事件会向上冒泡到body元素，触发了body上绑定的停止计时器逻辑，所以计时器刚启动就被停止了。

修复方案 #

在.exitA按钮的点击事件处理函数中，添加event.stopPropagation()方法，阻止事件向上冒泡到body，这样点击按钮时只会执行启动计时器的逻辑，不会触发停止逻辑。

修改后的代码示例 #

JavaScript 部分 #

let timer;
let count = 0;

// 按钮点击事件：启动计时器，阻止冒泡
document.querySelector('.exitA').addEventListener('click', function(event) {
  event.stopPropagation();
  // 清除之前的计时器（防止多次点击叠加）
  clearInterval(timer);
  count = 0;
  timer = setInterval(function() {
    count++;
    document.getElementById('timer').textContent = count;
  }, 1000);
});

// body点击事件：停止计时器
document.body.addEventListener('click', function() {
  clearInterval(timer);
});

HTML 结构示例 #

<button class="exitA">启动计时器</button>
<div id="timer">0</div>

说明 #

• event.stopPropagation()：阻止当前事件向上传播到父元素，避免触发body的点击事件。
• 每次启动计时器前调用clearInterval(timer)：防止多次点击按钮导致多个计时器同时运行，确保只有一个计时器在工作。

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