点击minimap内子元素时无法获取父容器div正确点击位置怎么办

解决方案 #

你遇到的问题核心是两点：

1. e.layerX 是相对于**事件触发目标target**的坐标，点击子元素时target变成子元素，坐标自然是相对于子元素的
2. 子元素的z-index设置不生效是因为层叠上下文规则：非static定位的父元素的子元素，默认层叠顺序高于父元素本身，就算子元素设z-index: 0也不会落到父元素下方

方案1：CSS穿透点击（最简单，无需改JS）

给所有minimap内部的子元素加pointer-events: none属性，让子元素不接收任何鼠标事件，点击会直接穿透到父元素.minimap上：

.viewport-layer, .relativeLayer, .ghosty-box {
  pointer-events: none;
}

改完之后不管点哪个子元素，点击事件的target都会是.minimap，直接用e.layerX/e.layerY就能得到正确的相对坐标。

注意：如果后续需要给子元素加单独的点击交互，这个方案不适用，选方案2。

方案2：JS手动计算坐标（兼容性最好，不影响子元素交互）

不用改任何CSS，直接在点击事件里手动计算相对于.minimap的坐标，不需要依赖e.layerX的自动计算：

function getClickPosition(e) {
  const minimap = document.querySelector('.minimap');
  // 获取minimap在视口内的位置偏移
  const mapRect = minimap.getBoundingClientRect();
  // 计算相对minimap左上角的坐标
  const clickX = e.clientX - mapRect.left;
  const clickY = e.clientY - mapRect.top;
  // 这里拿到的clickX、clickY就是始终相对于minimap的正确坐标
  console.log(clickX, clickY);
}

这个方案不影响子元素本身的事件接收，如果你后续需要给viewport或者ghosty-box加拖拽、点击等交互，用这个方案更灵活。

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