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

I have a long rectangular div (parent) with several smaller div (child) inside it. I want to click anywhere on the long rectangular div (including the child divs) to show the offset from the left of the parent div.

我有一个长矩形div (parent)，里面有几个小的div (child)。我希望在长矩形div(包括子div)中单击任何位置，以显示来自父div的左边的偏移量。

Currently this javascript code only works when I click outside the small divs, as soon as I click inside the child div, it shows me the offset of the child div. I'm quite new to javascript and can't seem to find relevant answers to this.

目前，这个javascript代码只在我在小div之外单击时有效，当我在子div中单击时，它就会显示子div的偏移量。

I hope someone could help, thanks in advance.

我希望有人能帮忙，谢谢你。

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

2 个解决方案

#1

You can use the getClientRects method with the clientX event value to get the net offset coordinate:

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

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

DEMO

演示

#2

First, I recommend learning a bit about DOM event bubbling and capturing. This is a DOM thing, not so much a Javascript thing, but essential to know. Rather than repeat it here, read this answer.

首先，我建议学习一些关于DOM事件冒泡和捕获的知识。这是一个DOM的东西，不是Javascript的东西，但必须知道。与其在这里重复，不如读读这个答案。

So, when you click on the child div, the event is first presented to the element that fired the event, which is the child div. It, however, does not have an event handler so the event bubbles up to the parent div. It does have a handler, which is invoked with the event object passed as arg e. Different browsers have different implementations of the event object. Since you're using offsetX you're probably using IE (or Opera) and not Chrome, Safari, or Firefox. According to this doc from Microsoft, offsetX() "sets or retrieves the x-coordinate of a pointer's position relative to the object firing the event". So, even though it's the parent div's event handler running, you'll get the position relative to the child since it was the object firing the event.

所以,当你点击孩子div,事件是第一次提交给触发事件的元素,这是孩子div。它,然而,并没有一个事件处理程序的事件泡沫父div。它有一个处理程序,调用的事件对象作为参数传递e。不同的浏览器有不同的事件对象的实现。因为你使用的是offsetX，你可能使用的是IE(或Opera)，而不是Chrome、Safari或Firefox。根据来自微软的doc, offsetX()“设置或检索指针相对于触发事件的对象的位置的x坐标”。因此，即使父div的事件处理程序正在运行，您也将获得相对于子div的位置，因为它是触发事件的对象。

Since you are new to JavaScript, I'll add this: due to the many incompatibilities between browsers, it is STRONGLY recommend that you use a JavaScript library that will handle these giving you a single normalized API. Your life will be easier, you'll be able to do much more, and your code will work on more than just IE. jQuery is a very popular one (and is in itself very beautiful). Read about jQuery's normalized Event Object.

由于您是JavaScript的新手，我将添加以下内容:由于浏览器之间存在许多不兼容性，强烈建议您使用JavaScript库，该库将处理这些问题，并为您提供一个标准化的API。你的生活将会变得更容易，你将能够做更多的事情，你的代码将不仅仅是IE。jQuery非常受欢迎(而且它本身非常漂亮)。阅读jQuery的规范化事件对象。

#1