<分区>
这是我最近遇到的问题。
我正在尝试获取用户在图像中单击的位置的 X 和 Y 坐标。不管它在用户窗口中的位置、缩放、滚动位置、窗口大小、用户早餐吃了什么等等，X、Y 坐标只需要考虑用户在窗口中单击的位置图像但不包括图像在屏幕中的位置，即图像中左上角的点为 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 坐标？谢谢!