javascript - 无法获取 div 元素的点击位置

Question

我想创建一个小地图。所以我在我的小地图中准确地表示了 div 元素。我希望用户使用小地图在网站上导航。

当我在我的小地图（灰色框）内单击时，我得到了正确的位置，但是当我单击“幽灵”或绿色框时，我得到了不正确的尺寸，这导致了不正确的位置设置。

这是一个展示：

function getClickPosition(e) {
  // I need the click position of the gray box 
  // but when I click on the green or red box I get their values
  console.log(e.layerX)
}

.minimap {
  height: 100px;
  width: 140px;
  background-color: #999;
  position: absolute;
  z-index: 100;
}
.viewport-layer {
 height: 20px;
 width: 35px;
 left: 20px;
 top: 15px;
 box-sizing: border-box;
 position: absolute;
 border: 2px solid green;
 z-index: 101;
 max-width: 100px;
}
.ghosty-box {
  position: absolute;
  top: 60px;
  left: 90px;
  height: 30px;
  width: 40px;
  background-color: red;
  z-index: 0; // should be in the background
}

<div class="minimap" onclick="getClickPosition(event)">
 <!-- user screen: green border -->
 <div class="viewport-layer">
 </div>
 <!-- dynamic size of the minimap -->
 <div class="relativeLayer">
  <!-- representation of the visible elements -->
  <div class="ghosty-box"></div>
 </div>
</div>

我的控制台e说：

click { target: div.ghosty-box, ... layerX: 10, layerY: 11 }

或者

click { target: div.viewportLayer, ... layerX: 33, layerY: 16 }

我期待 az-index会有所帮助。

你有什么建议来获得它.minimap或.relativeLayer后面的元素的点击位置吗？

所以target总是灰色的盒子？

标签： javascripthtmlcssdom-eventsz-index

Answer 1

我认为您希望在minimap. 这将为您提供单击项目的相对 X 和 Y - 以及相对 mouseX 和 mouseY（以及相对百分比位置）

function getClickPosition(e) {
  // I need the click position of the gray box 
  // but when I click on the green or red box I get their values
  if (e.target.classList.contains('minimap')) {
    console.log('clicked on minimap background');
    return;
  }
  let ref = e.target.closest('.minimap').getBoundingClientRect()
  let pos = e.target.getBoundingClientRect();
  let posY = pos.top - ref.top
  let posX = pos.left - ref.left
  let mouseY = e.clientY - ref.top
  let mouseYPerc = ((mouseY / ref.height) * 100).toFixed(2);
  let mouseX = e.clientX - ref.top
  let mouseXPerc = ((mouseX / ref.width) * 100).toFixed(2)
  console.log('my relative position X:' + posX + ' Y:' + posY);
  console.log("relative mouseX:" + mouseX + " (" + mouseXPerc + "%) horiz");
  console.log("relative mouseY:" + mouseY + " (" + mouseYPerc + "%) vert");
}

.minimap {
  height: 100px;
  width: 140px;
  background-color: #999;
  position: absolute;
  z-index: 100;
  margin: 50px;
  opacity: .2;
}

.viewport-layer {
  height: 20px;
  width: 35px;
  left: 20px;
  top: 15px;
  box-sizing: border-box;
  position: absolute;
  border: 2px solid green;
  z-index: 101;
  max-width: 100px;
}

.ghosty-box {
  position: absolute;
  top: 60px;
  left: 90px;
  height: 30px;
  width: 40px;
  background-color: red;
  z-index: 0; // should be in the background
}

<div class="minimap" onclick="getClickPosition(event)">
  <!-- user screen: green border -->
  <div class="viewport-layer">
  </div>
  <!-- dynamic size of the minimap -->
  <div class="relativeLayer">
    <!-- representation of the visible elements -->
    <div class="ghosty-box"></div>
  </div>
</div>