如何为.parent绑定mousemove事件并排除所有.child类子元素

当然可以做到！这个需求的核心是在事件触发时，先判断鼠标当前是否正处于任意一个.child元素（包括它的所有后代）上方，如果是的话就跳过事件逻辑。

具体实现代码 #

我们可以利用DOM的closest()方法来快速检测目标元素的上下文，代码如下：

// 获取.parent元素
const parent = document.querySelector('.parent');

// 绑定mousemove事件
parent.addEventListener('mousemove', (e) => {
  // 检查当前鼠标指向的元素（或其祖先）是否是.child
  const hoveredChild = e.target.closest('.child');
  
  // 如果找到匹配的.child，直接终止函数，不执行后续逻辑
  if (hoveredChild) return;

  // 这里写你需要执行的mousemove逻辑
  console.log('鼠标在非.child区域移动啦！');
});

原理说明 #

• e.target指的是鼠标当前实际悬停的DOM元素，可能是.child本身，也可能是它内部的子元素（比如你DOM结构里.four下的.child里如果有子元素的话）。
• closest('.child')会从e.target开始向上遍历整个DOM树，找到第一个匹配.child选择器的元素。如果返回值不为null，就说明鼠标正处于某个.child的范围内。
• 一旦检测到这种情况，我们就通过return直接结束事件处理函数，自然就不会触发原本的mousemove逻辑了。

这个方案不管.child是.parent的直接后代还是深层嵌套的后代，都能准确检测到，完全符合你的需求~

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