Javascript：获取图像中点击的 X、Y 坐标 [重复]答案

【问题标题】：Javascript: Get X, Y Coordinates of Click in Image [duplicate]Javascript：获取图像中点击的 X、Y 坐标 [重复]
【发布时间】：2018-04-12 23:06:39
【问题描述】：

这是我最近遇到的问题。

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

我之所以这么说是因为，在我当前的 JavaScript 函数中，我得到了 something 的 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 坐标对并将其添加到包含在名为热点列表的标记中的列表的末尾。有谁知道我是否走在正确的轨道上，或者可以为我指明正确的方向，或者知道我需要什么缺失的部分来获得真正的 X、Y 坐标？谢谢！

【问题讨论】：

标签： javascript html mouseevent

【解决方案1】：

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

Event object properties

这应该可以解决问题

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

【讨论】：