获取相对于最近的相对父级的点击位置

Question

我想在用户单击时在较大的 div 内呈现一个小 div。 我可以通过从event获取offsetX和offsetY来做到这一点。 这工作正常，直到较大的 div 中有子 div。 最外层 div 的onclick事件侦听器会触发，但event属性随后是相对于点击的子级而不是父级的。

我在这里做了一个小例子

https://codepen.io/markgeeromano311/pen/rPppRV

单击左子项时您可以看到它工作正常，因为它的 x 和 y 与父项位于同一点。 但是当你点击右边的孩子时，它显然会中断。

父母必须保持一个 flexbox，如果可以的话，我想避免将侦听器放在每个孩子身上作为解决方案。

谢谢！

 document.getElementById('outer').addEventListener('click', renderCM) function renderCM(e) { const cm = document.getElementById('contextmenu') console.log(e) cm.style.left = e.offsetX + 'px' cm.style.top = e.offsetY + 'px' cm.style.display = 'block' }

 #outer { width: 200px; height: 200px; background-color: red; display: flex; position: relative; padding: 5px; } .inner { width: 50%; height: 100%; background-color: blue; border: 1px solid; } #contextmenu { display: none; width: 10px; height: 10px; position: absolute; background-color: yellow; } #outermost { height: 350px; background-color: orange; display: flex; flex-direction: column; justify-content: center; align-items: center; }

 <div id="outermost"> <div id="outer"> <div id="contextmenu"></div> <div onclick=alert class="inner"> </div> <div class="inner"> </div> </div>

Answer 1

是的，不需要为孩子添加单独的事件侦听器。 您可以使用e.target.offsetLeft和e.target.offsetTop获得子div的相对偏移量，然后将其添加到e.offsetX和e.offsetY它应该为您提供正确的cm位置，而不管divs的数量：

 document.getElementById('outer').addEventListener('click', renderCM) function renderCM(e) { const cm = document.getElementById('contextmenu') cm.style.left = e.target.offsetLeft + e.offsetX + 'px' cm.style.top = e.target.offsetTop + e.offsetY + 'px' cm.style.display = 'block' }

 #outer { width: 200px; height:200px; background-color: red; display: flex; position: relative; padding: 5px; } .inner { width: 50%; height: 100%; background-color: blue; border: 1px solid; } #contextmenu { display: none; width: 10px; height: 10px; position: absolute; background-color: yellow; } #outermost { width: 350px; height: 350px; background-color: orange; display: flex; flex-direction: column; justify-content: center; align-items: center; }

 <div id="outer"> <div id="contextmenu"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>

编辑：一个更好的解决方案：

function renderCM(e) {
    const cm = document.getElementById('contextmenu')
    cm.style.left = e.layerX + 'px'
    cm.style.top = e.layerY + 'px'
    cm.style.display = 'block'  
}

感谢@Alok Singh 指出layerX和layerY