在父级div内获取鼠标点击位置的javascript代码

Question

我有一个长方形的div（父元素），里面有几个小的div（子元素）。我想在长方形div上的任何位置（包括子div）点击时显示相对于父div左侧的偏移量。

目前，这段javascript代码只能在我点击小div之外的位置时起作用，一旦我点击子div内部，它就会显示子div的偏移量。我对javascript很新，似乎找不到相关的答案。

希望有人能帮忙，提前感谢。

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

- shshchch88

---

你能贴一个fiddle吗？ - Sterling Archer

请在 http://jsfiddle.net 发布演示。 - Abdennour TOUMI

可能是重复的问题：jQuery获取元素内鼠标位置。 - Shannon

这是代码：http://jsfiddle.net/VGx2v/2/ - shshchch88

Answer 1

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

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

DEMO

- tewathia

---

我发现学习JavaScript很困难，比如像这样的查找函数，我没有其他寻找可能解决方法的途径，除了直接询问，你有哪些好的参考资料建议吗？ - shshchch88

谢谢。这对于计算应用了变换的元素位置非常有效。 - cgatian

Answer 2

首先，我建议学习一些关于DOM事件冒泡和捕获的内容。这是一个DOM的内容，不太是Javascript的东西，但是很重要。不必在此重复，请阅读这个答案。

因此，当您点击子

时，事件首先呈现给触发事件的元素，即子

。但是，它没有事件处理程序，因此事件会冒泡到父

。 它确实有一个处理程序，由事件对象作为参数e调用。 不同的浏览器对事件对象有不同的实现。 由于您使用offsetX，所以您可能在使用IE（或Opera），而不是Chrome，Safari或Firefox。 根据Microsoft的文档，offsetX()“设置或检索指针位置的x坐标相对于触发事件的对象”。 因此，即使是父

的事件处理程序运行，您也将获得相对于子级的位置，因为它是触发事件的对象。

由于您是JavaScript的新手，我想补充一下：由于浏览器之间存在许多不兼容性，强烈建议您使用JavaScript库来处理这些问题，从而为您提供单一的规范化API。 这样您的生活会更轻松，您将能够做更多的事情，并且您的代码将在不止IE上运行。 jQuery是非常受欢迎的一个（本身非常漂亮）。 了解jQuery的规范化事件对象。

- BareNakedCoder

Answer 3

我解决这个问题的方法是给子 div 设置 z-index: -1。

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

- Shivam Verma