Angular中绝对定位div鼠标事件失效问题（时间线场景）

你的问题根源不是container的绝对定位，而是上层的mwlResizable div遮挡了container，导致鼠标事件被这个上层元素捕获，container自然收不到mousemove事件。下面提供两种可行的解决方案：

方案一：让resizable元素穿透事件（保留resize功能） #

给mwlResizable所在的div添加CSS样式，让其主体不拦截鼠标事件，仅保留resize手柄的交互能力：

/* 全局或组件内样式 */
.mwl-resizable {
  pointer-events: none; /* 让主体穿透鼠标事件 */
}

.mwl-resizable .resize-handle {
  pointer-events: auto; /* 让resize手柄正常接收事件 */
}

这样修改后，你原来给container绑定的mousemove监听器就能正常工作了——鼠标移动时事件会穿透resizable div，触发container的mousemove，同时resize手柄依然可以正常拖动调整大小。

方案二：通过父元素代理事件 + 定位目标元素 #

如果不想修改CSS，也可以在父容器（timeline）上绑定mousemove事件，通过document.elementFromPoint获取鼠标位置对应的date元素：

1. 修改模板，给timeline添加事件绑定：

<div id="timeline" style="min-height:800px; min-width: 1000px; position: relative" (mousemove)="onTimelineMouseMove($event)">
  <div class="container" style="display: flex; flex-direction: row; position: absolute; top: 0; bottom: 0; left: 0; right: 0; ">
    <div data-date="01/02/2023"></div>
    <div data-date="02/02/2023"></div>
    <div data-date="03/02/2023"></div>
    <div data-date="04/02/2023"></div>
    <div data-date="05/02/2023"></div>
    <div data-date="06/02/2023"></div>
    <div data-date="07/02/2023"></div>
    <div data-date="08/02/2023"></div>
  </div>
  <div mwlResizable (resizing)="onResize($event)" (resizeEnd)="onResizeEnd($event)"></div>
</div>

2. 在组件类中实现事件处理方法：

onTimelineMouseMove(event: MouseEvent): void {
  // 获取鼠标位置下的最上层元素
  const targetElement = document.elementFromPoint(event.clientX, event.clientY);
  if (targetElement?.hasAttribute('data-date')) {
    const dateValue = targetElement.getAttribute('data-date');
    console.log(dateValue);
  }
}

这种方法通过父元素接收所有mousemove事件，再精准定位到对应的date元素，不受上层resizable元素的遮挡影响。

Angular最佳实践补充 #

尽量避免直接用document.querySelector操作DOM，建议用@ViewChild获取container元素：

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

// 组件类内
@ViewChild('container', { static: false }) containerRef!: ElementRef<HTMLDivElement>;

ngAfterViewInit(): void {
  // 这里可以用this.containerRef.nativeElement替代document.querySelector('.container')
}

同时模板中给container添加模板引用变量：

<div #container class="container" style="display: flex; flex-direction: row; position: absolute; top: 0; bottom: 0; left: 0; right: 0; ">

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