为何页面的OnClick与OnKeyDown事件无法正常工作？

1. 事件冒泡被拦截 #

如果页面内有其他元素的事件处理函数调用了event.stopPropagation()（点击事件）或阻止了键盘事件冒泡，会导致document层面的监听器无法捕获到事件。

修复方式：改用事件捕获模式绑定监听器，即使子元素阻止冒泡，document仍能捕获到事件：

document.addEventListener('click', function() {
  clicks++;
}, true); // 第三个参数true开启捕获模式

document.addEventListener('keydown', function() {
  keys_pressed++;
}, true);

2. 全局变量冲突 #

你用var声明的全局变量可能被页面其他脚本的同名变量覆盖，导致计数被重置或篡改。

修复方式：将变量和逻辑封装到局部作用域，避免全局污染：

(function() {
  var clicks = 0;
  var time1;
  var keys_pressed = 0;
  var keys_typed = 0;

  window.startTrack = function() {
    time1 = Date.now();
    clicks = 0;
    keys_pressed = 0;
    keys_typed = 0;
  };

  document.addEventListener('click', function() {
    clicks++;
  }, true);

  document.addEventListener('keydown', function() {
    keys_pressed++;
  }, true);

  window.analytics = function() {
    var time2 = Date.now();
    var time = time2 - time1;
    var min = Math.floor(time / 60000);
    var sec = (time % 60000) / 1000;

    document.body.insertAdjacentHTML('afterbegin', 
      '<div hidden><p>鼠标点击次数: '+ clicks + '</p>' +
      '<p>总耗时: ' + min + ' 分钟, ' + sec + ' 秒</p>' +
      '<p>按键总次数: ' + keys_pressed + '</p>' +
      '<p>输入字符总数: ' + keys_typed + '</p></div>'
    );
  };
})();

3. 事件绑定时机问题 #

如果脚本放在<head>标签中，部分早期浏览器可能会出现绑定失效的情况。建议将脚本移至<body>末尾，确保DOM加载完成后再绑定事件：

<body onload="startTrack()">
  <!-- 页面内容 -->
  <script>
    // 你的JS代码放在这里
  </script>
</body>

4. 快速调试验证 #

可以在事件处理函数中加入控制台输出，确认事件是否正常触发：

document.addEventListener('click', function() {
  clicks++;
  console.log('当前点击次数:', clicks); // 打开浏览器控制台查看输出
}, true);

document.addEventListener('keydown', function(e) {
  keys_pressed++;
  console.log('当前按键次数:', keys_pressed, '按键:', e.key); // 验证键盘事件
}, true);

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