通过 javascript 从 <input type='image'> 获取点击坐标

Question

例子：

<form>
<input type="image" id = 'toothsImage' src="someImg.jpg" alt="Submit" />
</form>

图像表单 TYPE 的作用很像 INPUT TYPE=SUBMIT 字段，但与 SUBMIT 字段不同的是，除了表单数据的其余部分之外，被激活的图像的坐标还会被发送回服务器。所以 - 当点击 input=image 时 - 请求将附加点击坐标，如下所示：

x=1&y=2

我的问题是 - 如何在不提交表单的情况下使用 javascript 检索这些坐标。

PS 1：我知道可以通过多种方式计算点击坐标。我了解它们并且可以轻松使用它们。我只对这种方法感兴趣，因为这里浏览器会自动计算所有内容。

PS 2： 我需要获取相对于图像而不是文档的坐标。

Answer 1

看起来offsetX，offsetY 在某些浏览器中不可用或不可靠。我会推荐使用pageXandpageY因为它们被jQuery 规范化了。将其与offset被单击的元素的结合起来，您应该可以开展业务：

$("input[type='image']").click(function(event) {
    var elOffsetX = $(this).offset().left,
        elOffsetY = $(this).offset().top,
        clickOffsetX = event.pageX - elOffsetX,
        clickOffsetY = event.pageY - elOffsetY;

    // clickOffsetX and clickOffsetY are the clicked coordinates,
    // relative to the image.
});

示例： http : //jsfiddle.net/andrewwhitaker/87NYk/