表格上覆盖DIV实现列宽调整时，如何让下层元素响应鼠标事件？

嘿，我懂你的困扰——为了实现表格列宽调整，你在表格上方加了个DIV捕获鼠标事件，但这个DIV把下面锚点标签的鼠标交互全挡住了，比如点击没法跳转、hover样式不生效，对吧？下面给你几个实用的解决方案，按推荐程度排序：

1. 用CSS pointer-events 让事件穿透（最推荐） #

这个方法最简洁，核心思路是让覆盖的DIV只在拖拽手柄区域响应鼠标事件，其他区域直接把事件透传给下面的表格元素。

具体操作： #

• 给你的覆盖DIV（也就是gripsId对应的元素）设置pointer-events: none，这样它默认不会拦截任何鼠标事件，事件会直接落到下面的表格上。
• 只给DIV里负责拖拽的手柄元素（比如每个列对应的调整 grip）设置pointer-events: auto，让这些手柄正常响应拖拽事件。

示例CSS代码：

/* 整个覆盖DIV不接收鼠标事件 */
#your-grips-id {
  pointer-events: none;
}

/* 只有拖拽手柄可以响应鼠标事件 */
#your-grips-id .resize-handle {
  pointer-events: auto;
  /* 这里添加手柄的样式，比如宽度、位置、背景色等 */
  width: 5px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: col-resize;
}

这样设置后，除了拖拽手柄的位置，其他区域的鼠标事件都会直接传递给下面的锚点标签，点击、hover这些交互就和没有DIV覆盖时一样正常了。

2. 手动转发鼠标事件（适合特殊场景） #

如果因为某些原因不能用pointer-events，可以在覆盖的DIV上监听鼠标事件，然后手动把事件转发给下面的锚点元素。

示例代码（以点击事件为例）： #

在你的handleResize函数里添加事件监听：

function handleResize(tableId, gripsId) {
  var tbl = document.getElementById(tableId);
  var grips = document.getElementById(gripsId);
  
  // 监听DIV的点击事件
  grips.addEventListener('click', function(e) {
    // 获取鼠标位置对应的底层元素
    const targetElement = document.elementFromPoint(e.clientX, e.clientY);
    // 如果是锚点标签，手动触发它的点击事件
    if (targetElement.tagName === 'A') {
      targetElement.click();
      // 阻止事件继续传播，避免触发拖拽逻辑
      e.stopPropagation();
    }
  });

  // 同理，你可以监听mouseover、mousedown等事件，转发给对应的元素
  grips.addEventListener('mouseover', function(e) {
    const targetElement = document.elementFromPoint(e.clientX, e.clientY);
    if (targetElement.tagName === 'A') {
      // 触发mouseover事件
      const mouseOverEvent = new MouseEvent('mouseover', { bubbles: true });
      targetElement.dispatchEvent(mouseOverEvent);
    }
  });

  // 你的原有拖拽逻辑...
}

这个方法需要处理多种事件类型，比较繁琐，所以只推荐在pointer-events无法使用的场景下用。

3. 调整DOM结构，移除覆盖DIV（最彻底） #

如果可以重构代码，最好的方式是把拖拽手柄直接嵌入到表格的表头单元格里，而不是用一个独立的覆盖DIV。比如在每个表头单元格的右侧添加一个小的拖拽元素，直接绑定列宽调整事件。

这样DOM结构更清晰，完全不会有遮挡问题，锚点标签的鼠标事件自然就能正常工作。

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