Question

这是我最新的问题。

我正在尝试获取用户在图像中单击的位置的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坐标对，并将其添加到＆lt; textarea＆gt;中包含的列表的末尾。标签名为hotspot_list。有没有人知道我是在正确的轨道上还是可以指向正确的方向，或者知道我需要什么样的缺失来获得真正的X，Y坐标？谢谢！

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

Javascript：获取点击图片的X，Y坐标

1 个答案: