Angular 17：鼠标悬停时如何获取子组件的正确ElementRef

核心问题分析 #

鼠标悬停时获取整个DOM而非目标元素，本质是事件绑定范围错误或事件冒泡导致目标元素识别偏差：

• 若hover事件绑定在父容器上，event.target可能指向父容器或其他非目标子元素
• 未区分event.target（实际触发事件的元素）与event.currentTarget（绑定事件的元素），导致获取错误的元素引用

具体修复步骤 #

1. 精准绑定hover事件到目标元素 #

避免将hover事件绑定在父容器上，直接绑定到每个可拖拽元素：

// 遍历所有可拖拽元素，单独绑定hover事件
document.querySelectorAll('.draggable-element').forEach(el => {
  el.addEventListener('mouseover', handleElementHover);
  el.addEventListener('mouseout', removeResizeHandles);
});

2. 在事件处理中锁定目标元素 #

使用event.currentTarget确保获取到绑定事件的可拖拽元素，同时阻止事件冒泡避免干扰：

function handleElementHover(e) {
  e.stopPropagation(); // 阻止事件向上冒泡到父级DOM
  const targetElement = e.currentTarget; // 精准获取当前悬停的可拖拽元素
  addResizeHandles(targetElement);
}

3. 确保敏感点相对目标元素定位 #

给可拖拽元素设置相对定位，敏感点设置绝对定位，保证红色方块基于目标元素定位：

.draggable-element {
  position: relative; /* 作为敏感点的定位基准 */
  /* 其他样式 */
}

.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: red;
  margin: -6px; /* 让方块居中在边角 */
}

4. 动态添加敏感点的位置计算 #

基于目标元素的尺寸和位置，计算边角敏感点的坐标：

function addResizeHandles(element) {
  // 先移除已存在的敏感点
  removeResizeHandles(element);
  
  const handles = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
  handles.forEach(position => {
    const handle = document.createElement('div');
    handle.className = `resize-handle resize-handle-${position}`;
    // 根据位置设置样式
    switch(position) {
      case 'top-left':
        handle.style.top = '0';
        handle.style.left = '0';
        break;
      case 'top-right':
        handle.style.top = '0';
        handle.style.right = '0';
        break;
      case 'bottom-right':
        handle.style.bottom = '0';
        handle.style.right = '0';
        break;
      case 'bottom-left':
        handle.style.bottom = '0';
        handle.style.left = '0';
        break;
    }
    element.appendChild(handle);
  });
}

function removeResizeHandles(element) {
  const handles = element.querySelectorAll('.resize-handle');
  handles.forEach(handle => handle.remove());
}

为什么拖拽开始后定位正确？ #

拖拽事件通常在用户点击目标元素后触发，此时会通过明确的元素引用锁定目标，且拖拽过程中持续以该元素为基准计算位置，因此不会出现DOM范围的识别错误。

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