Javascript：获取图像中点击的 X、Y 坐标

Question

这是我的最新问题。

我正在尝试获取用户在图像内单击的位置的 X 和 Y 坐标。无论它在用户窗口中的位置、缩放、滚动位置、窗​​口大小、用户早餐吃什么等，X、Y 坐标都必须只考虑用户在image 但不包括图像在屏幕中的位置，即图像的左上角为 0,0。（希望我能清楚地解释这一点。）

我之所以这么说是因为，在我当前的 JavaScript 函数中，我正在获取某物的 X、Y 坐标，但我不确定到底是什么。我认为这是用户在整个窗口中单击的位置，而不是图像中的位置。这意味着如果图像的位置不同，如果用户已经滚动，如果我将图像移动到页面中的其他位置等，X、Y 坐标会发生变化。这是我当前的 HTML 代码：

<img id="hotspot_image" name="hotspot_image" style="width: 50%" src="misc/pages/hotspotimage.jpg" alt="Hotspot image" onclick="clickHotspotImage(event);"/>

这是我的 Javascript 函数：

function clickHotspotImage(event) {
    var xOffset = document.getElementById('hotspot_image').offsetLeft;
    var xCoordinate = event.clientX;
    var yOffset = document.getElementById('hotspot_image').offsetTop;
    var yCoordinate = event.clientY;
    var hotspotlist = document.getElementById('hotspot_list').value;
    document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;
}

那里的最后几行代码采用 X,Y 坐标对并将其添加到包含在名为 hotspot_list 的 <textarea> 标记中的列表的末尾。有谁知道我是否在正确的轨道上，或者可以指出我正确的方向，或者知道我需要哪个缺失的部分才能获得真正的 X、Y 坐标？谢谢！

Answer 1

您应该使用事件对象中的 offsetX 和 offsetY 来获取相对于触发事件的元素的鼠标坐标。正如您所指出的，clientX 和 clientY 将返回相对于窗口的鼠标坐标。

事件对象属性

这应该可以解决问题

function clickHotspotImage(event) {
    var xCoordinate = event.offsetX;
    var yCoordinate = event.offsetY;
    var hotspotlist = document.getElementById('hotspot_list').value;
    document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;
}