如何让dragenter事件仅触发在容器而非其子元素上？

问题根源在于：dragenter/dragleave事件会在元素边界触发，当容器被子元素完全覆盖时，拖拽进入子元素会触发子元素的对应事件并冒泡到容器，导致容器的事件逻辑被多次执行；同时在子元素间移动时，会频繁触发事件，引发重复样式修改等问题。

以下是几种可行的解决方法：

方法一：通过状态标记与位置判断控制事件逻辑 #

用一个状态变量标记容器是否已处于拖拽激活状态，同时在dragleave时判断鼠标是否真的离开容器边界，避免子元素间移动误触发。

let isDraggingOver = false;
const container = document.querySelector('.ui-layout--cell-container');

container.ondragenter = (e) => {
  e.preventDefault();
  if (!isDraggingOver) {
    container.style.opacity = '0.5';
    isDraggingOver = true;
  }
};

container.ondragleave = (e) => {
  const rect = container.getBoundingClientRect();
  // 检查鼠标是否真的离开容器范围
  const isOutside = e.clientY < rect.top || e.clientY > rect.bottom || 
                    e.clientX < rect.left || e.clientX > rect.right;
  
  if (isOutside && isDraggingOver) {
    container.style.opacity = '1';
    isDraggingOver = false;
  }
};

// 必须阻止dragover的默认行为，才能触发后续drop事件
container.ondragover = (e) => {
  e.preventDefault();
};

方法二：阻止子元素的事件冒泡 #

给容器内的子元素添加事件监听，阻止它们的dragenter/dragleave事件冒泡到容器，这样容器只会在鼠标真正进入/离开自身边界时触发事件。

const container = document.querySelector('.ui-layout--cell-container');
const childElements = container.querySelectorAll('.ui-layout--panel-header-bar, .ui-layout--panel-body');

// 阻止子元素的拖拽事件冒泡
childElements.forEach(child => {
  child.ondragenter = (e) => {
    e.stopPropagation();
    e.preventDefault();
  };
  child.ondragleave = (e) => {
    e.stopPropagation();
  };
});

// 容器的事件逻辑
container.ondragenter = () => {
  container.style.opacity = '0.5';
};

container.ondragleave = () => {
  container.style.opacity = '1';
};

container.ondragover = (e) => {
  e.preventDefault();
};

注意：如果子元素需要自身处理拖拽相关逻辑，这种方法会冲突，需谨慎使用。

方法三：CSS穿透鼠标事件（仅适用于子元素无需交互的场景） #

通过pointer-events: none让子元素不响应任何鼠标事件，鼠标事件会直接穿透到容器，确保容器能直接监听dragenter/dragleave。

.ui-layout--panel-header-bar, .ui-layout--panel-body {
  pointer-events: none;
}

const container = document.querySelector('.ui-layout--cell-container');

container.ondragenter = () => {
  container.style.opacity = '0.5';
};

container.ondragleave = () => {
  container.style.opacity = '1';
};

container.ondragover = (e) => {
  e.preventDefault();
};

此方法会让子元素失去所有鼠标交互能力（比如点击、自身拖拽等），仅适合子元素无需用户交互的场景。

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