为什么使用mouseover事件模拟hover操作在部分场景下不生效？

• 事件类型不匹配：你当前仅派发了mouseover事件，而这类站点的悬浮提示通常绑定的是mouseenter或者pointer*系列指针事件，mouseenter本身不支持冒泡，你创建的事件未覆盖目标绑定的事件类型，自然不会触发逻辑。
• 缺少必要的事件属性：真实用户触发的鼠标事件会携带clientX、clientY坐标信息，很多站点的事件处理逻辑会校验坐标是否落在元素范围内，你构造的事件未传坐标参数，会被逻辑直接过滤。
• 框架合成事件兼容问题：该站点用React构建，React的合成事件系统会对原生事件做一层封装，部分场景下仅派发单个原生事件无法被合成事件系统识别，不会触发绑定的回调。

按真实用户触发事件的流程，依次派发多种指针、鼠标事件，同时传入正确的元素坐标，代码如下：

function simulateHover(target) {
  // 计算元素中心坐标
  const { left, top, width, height } = target.getBoundingClientRect();
  const baseOpts = {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: left + width / 2,
    clientY: top + height / 2
  };
  // 按真实触发顺序派发全量事件
  [
    new PointerEvent('pointerover', { ...baseOpts, pointerId: 1, isPrimary: true }),
    new PointerEvent('pointerenter', { ...baseOpts, pointerId: 1, isPrimary: true }),
    new MouseEvent('mouseover', baseOpts),
    new MouseEvent('mouseenter', baseOpts),
    new MouseEvent('mousemove', baseOpts)
  ].forEach(event => target.dispatchEvent(event));
}

调用方式和你之前一致：

simulateHover(temp1);

额外优化建议 #

如果你只是需要获取直播发布的时间戳，不需要触发悬浮弹窗，可以直接从日期元素的内置属性读取：该站点的日期元素默认会把秒级时间存在data-utime自定义属性中，直接调用temp1.dataset.utime就能拿到时间戳，转成可读时间即可，比模拟事件更稳定，不会受页面交互逻辑变更影响。

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