Question

我有一个长矩形div（父级），里面有几个较小的div（child）。我想单击长矩形div（包括子div）上的任意位置，以显示父div左侧的偏移量。

目前这个javascript代码仅在我点击小div之外时才有效，只要我在子div中单击，它就会显示子div的偏移量。我对javascript很陌生，似乎无法找到相关答案。

我希望有人可以提前帮助。

window.onload = function(){
    parentDiv.addEventListener('click',function(e){
        alert(e.offsetX);
}, false);

Answer 1

您可以使用getClientRects方法和clientX事件值来获取净偏移坐标：

var offset = this.getClientRects()[0];
alert(e.clientX - offset.left);

DEMO

Answer 2

首先，我建议学习一下DOM事件冒泡和捕获。这是一个DOM的东西，不是一个Javascript的东西，但知道必不可少。不要在此重复，请阅读this answer。

因此，当您点击子div时，事件首先会显示给触发事件的元素，即子div。但是，它没有事件处理程序，因此事件会冒泡到父div。它有一个处理程序，它使用作为arg e传递的事件对象调用。不同的浏览器具有不同的事件对象实现。由于您使用的是offsetX，因此您可能使用的是IE（或Opera），而不是Chrome，Safari或Firefox。根据此doc from Microsoft，offsetX()＆＃34;设置或检索指针相对于触发事件的对象的位置的x坐标＆＃34 ;。因此，即使父级div的事件处理程序正在运行，您也会获得相对于子级的位置，因为它是触发事件的对象。

由于您不熟悉JavaScript，我将添加以下内容：由于浏览器之间存在许多不兼容性，因此强烈建议您使用能够处理这些内容的JavaScript库，为您提供单一的规范化API。您的生活将变得更加轻松，您将能够做得更多，而且您的代码不仅仅适用于IE。 jQuery是一个非常受欢迎的（并且本身非常漂亮）。阅读有关jQuery标准化Event Object。

的信息

Answer 3

我解决问题的方法是将 z-index : -1 赋予子 div。

parentDiv = document.getElementByClassName("parentDiv");
window.onload = function(){
    parentDiv.addEventListener('click',function(e){
        alert(e.offsetX);
}, false);

在 HTML 中我有：

<div classname = "parentDiv">
   <div classname = "childDiv"> I am child</div>
</div>

并在 css 中：

.childDiv{
   z-index : -1;
}

在父div javascript中获取鼠标单击的位置

3 个答案: