JavaScript 中怎么在事件委托中处理鼠标悬停事件-js教程-PHP中文网

mouseenter/mouseleave 不支持事件委托，因其不冒泡且仅在元素可视边界触发；需用冒泡的 mouseover/mouseout 结合 relatedtarget 判断是否真正进出目标元素。

javascript 中怎么在事件委托中处理鼠标悬停事件

鼠标悬停（mouseenter 和 mouseleave）本身不支持原生事件委托，因为它们**不冒泡**；但你可以用 mouseover 和 mouseout 实现类似效果，再通过事件对象的 relatedTarget 过滤掉子元素干扰，模拟出委托式的悬停行为。

为什么不能直接用 mouseenter / mouseleave 委托？

mouseenter 和 mouseleave 被设计为“边界感知”事件：只在真正进入/离开绑定元素的**可视边界**时触发，且明确禁止冒泡。这意味着父元素监听不到子元素上的这两个事件——无法委托。

用 mouseover + mouseout 模拟委托式悬停

这两个事件会冒泡，适合委托，但需手动排除“在内部元素间移动”产生的误触发（比如从父 div 移到子 span，mouseout 会错误触发）。关键判断逻辑是：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

检查 event.target 是否匹配你关心的选择器（如 .card）
检查 event.relatedTarget 是否在当前目标元素内部（即是否是它的后代）
只有当 relatedTarget 不在目标元素内时，才视为真正的“移入”或“移出”

示例：给所有 .item 元素添加悬停高亮，使用委托方式绑定在 #list 上：

const list = document.getElementById('list');

list.addEventListener('mouseover', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;

  // 确保是真正进入 .item，而非在它内部移动
  if (!item.contains(e.relatedTarget)) {
    item.classList.add('hovered');
  }
});

list.addEventListener('mouseout', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;

  // 确保是真正离开 .item
  if (!item.contains(e.relatedTarget)) {
    item.classList.remove('hovered');
  }
});

更简洁的封装思路（可复用）

可以封装一个轻量函数，自动处理进出逻辑：

function delegateHover(parent, selector, onEnter, onLeave) {
  parent.addEventListener('mouseover', (e) => {
    const target = e.target.closest(selector);
    if (!target || target.contains(e.relatedTarget)) return;
    onEnter.call(target, e);
  });

  parent.addEventListener('mouseout', (e) => {
    const target = e.target.closest(selector);
    if (!target || target.contains(e.relatedTarget)) return;
    onLeave.call(target, e);
  });
}

// 使用
delegateHover(
  document.body,
  '.btn',
  () => console.log('进入按钮'),
  () => console.log('离开按钮')
);