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

如何解决无法获取 div 元素的点击位置

我想创建一个小地图。所以我在我的小地图中有一个 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 }

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

您有什么建议可以获取带有后面元素的 .minimap 或 .relativeLayer 的点击位置吗？

所以 target 是总是灰色框？

解决方法

我不确定您希望从各个层中获得什么读数，但有几点意见：

根据MDN：

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，未来可能会改变行为。

如果您想要相对于灰色框的位置，如您的示例所示，您可能需要查看 event.pageX 或 event.clientX。如此代码段所示：

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('pageX = ' + e.pageX);
  console.log('clientX = ' + e.clientX);
}

.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>

或者，当您处理点击事件时，您可能想要检查在嵌套元素时点击了哪个实际元素和/或您可能想或不想停止传播。例如，值得查看事件对象 console.log(e) 以了解目标是什么以及为获得正确的目标而提供的其他设置。

,

我认为您需要 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>

,

如果你真的不需要点击里面的元素，一个好的解决方案可能是放置一个覆盖整个小地图的绝对定位空层，只是为了捕捉点击。我用 .position-layer

类将它添加到您的代码段中

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);
  console.log(e.layerY);
}

.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
}

.position-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:1000;
}

<div class="minimap">
 <!-- 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 class="position-layer" onclick="getClickPosition(event)"></div>
</div>

,

MDN 说（我在解释）layerX 是鼠标光标相对于被点击元素的位置，或者是绝对定位元素的父元素之一

你的幽灵框是 position: absolute，这意味着它被点击了，layerX 是相对于它的。 如果您可以相对定位或使用边距，那就可以解决问题。

其他选项是使用 pageX 或 screenX 并自己计算偏移量，或者在小地图上放置一个叠加元素并捕捉点击。