如何让onClick事件仅在刻意点击元素时触发，而非跨元素点击释放？

为什么会出现这种target判定？ #

click事件是mousedown（按下鼠标）和mouseup（释放鼠标）的组合事件，只有完成这两个动作才会触发。e.target指向的是**mouseup动作发生时的元素**，而非mousedown的起始元素，这就是你第一个场景中target被判定为<body>的原因。

你提到的反向场景（在<body>按下、<div>释放），正常情况下e.target应该是<div>。如果你的测试结果显示为<body>，大概率是混淆了e.target和e.currentTarget：e.currentTarget是绑定事件监听的元素（此处为<body>），而e.target是实际触发事件的元素，建议检查控制台输出确认属性。

如何获取点击的起始元素 #

要记录点击的起始元素，需要单独监听mousedown事件并存储该元素，后续在click事件中调用：

let startElement = null;

// 监听mousedown事件，记录起始元素
document.addEventListener('mousedown', (e) => {
  startElement = e.target;
});

document.body.addEventListener('click', (e) => {
  console.log('起始元素:', startElement);
  console.log('释放元素:', e.target);
});

侧边菜单场景的解决方案 #

你的需求是点击<body>时关闭菜单，但起始于菜单、释放在<body>时不关闭。利用上述方法，在click事件中判断起始元素是否属于菜单即可：

let startElement = null;

document.addEventListener('mousedown', (e) => {
  startElement = e.target;
});

document.body.addEventListener('click', (e) => {
  // 假设菜单的类名为.sidebar-menu
  if (!startElement.closest('.sidebar-menu')) {
    // 执行菜单关闭逻辑
    console.log('关闭菜单');
  }
});

浏览器差异说明 #

不同浏览器对复合事件的处理可能存在细微差异，但click事件的target指向释放元素是标准行为，你在Chrome中遇到的现象符合这一标准。

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