Chrome扩展：模拟Hover事件后导航子菜单未弹出的问题

你遇到的问题是：通过Chrome扩展脚本触发mouseover事件后，控制台能打印日志，但导航菜单项的子菜单并未弹出。这是因为很多网站的hover交互逻辑并非仅依赖mouseover事件，可能涉及其他事件、CSS伪类或事件委托机制，以下是几种可行的解决方案：

1. 触发多个hover相关事件 #

很多现代网站或框架会同时监听mouseenter、pointerover这类和hover相关的事件，单一触发mouseover可能无法覆盖所有逻辑：

function hoverFunction(id){
  let element = document.getElementById(id);
  if (!element) return;

  // 批量触发hover相关事件
  const eventTypes = ['mouseover', 'mouseenter', 'pointerover'];
  eventTypes.forEach(type => {
    const rect = element.getBoundingClientRect();
    const event = new MouseEvent(type, {
      view: window,
      bubbles: true,
      cancelable: true,
      // 添加上具体的鼠标位置，模拟真实hover的坐标
      clientX: rect.x + 10,
      clientY: rect.y + 10
    });
    element.dispatchEvent(event);
  });

  // 如果子菜单是通过父元素的hover类控制的，直接添加类
  element.classList.add('hover');
}

2. 模拟真实鼠标移动轨迹 #

部分网站会检测鼠标的移动路径，仅触发单个事件会被判定为非真实交互，模拟从元素外移动到元素内的过程：

function hoverFunction(id){
  let element = document.getElementById(id);
  if (!element) return;

  const rect = element.getBoundingClientRect();
  // 先在元素外部触发鼠标移动事件
  const outerMove = new MouseEvent('mousemove', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: rect.x - 5,
    clientY: rect.y + rect.height / 2
  });
  document.dispatchEvent(outerMove);

  // 再移动到元素内部
  const innerMove = new MouseEvent('mousemove', {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: rect.x + 10,
    clientY: rect.y + rect.height / 2
  });
  document.dispatchEvent(innerMove);

  // 最后触发mouseenter事件（该事件不冒泡，直接在目标元素上触发）
  const hoverEvent = new MouseEvent('mouseenter', {
    view: window,
    cancelable: true
  });
  element.dispatchEvent(hoverEvent);
}

3. 直接强制显示子菜单 #

如果不想纠结事件触发逻辑，可以直接找到子菜单元素，修改样式让它显示：

function hoverFunction(id){
  let element = document.getElementById(id);
  if (!element) return;

  // 替换成你目标网站子菜单的实际选择器
  const subMenu = element.querySelector('.nav-submenu');
  if (subMenu) {
    // 覆盖原有隐藏样式
    subMenu.style.display = 'block';
    subMenu.style.opacity = '1';
    subMenu.style.visibility = 'visible';
    // 强制触发重绘，确保过渡效果生效
    void subMenu.offsetWidth;
  }
}

4. 适配事件委托场景 #

如果网站使用了事件委托（将hover事件绑定在父元素或document上），需要确保事件能正确冒泡到委托元素，或者直接在委托元素上触发事件：

function hoverFunction(id){
  let element = document.getElementById(id);
  if (!element) return;

  const event = new MouseEvent('mouseover', {
    view: window,
    bubbles: true,
    cancelable: true,
    target: element
  });
  // 假设事件委托绑定在document上，可根据实际情况替换为父元素
  document.dispatchEvent(event);
}

注意事项 #

不同网站的hover实现逻辑差异很大，建议先通过浏览器开发者工具检查：

• 查看目标元素的CSS，是否有:hover伪类控制子菜单显示
• 在Elements面板的Event Listeners标签，查看元素绑定了哪些hover相关事件

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