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检索这些坐标。

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

P.S 2： 我需要得到相对于图像的坐标，而不是文档。

Answer 1

看起来像offsetX，offsetY aren't available or are unreliable in some browsers。我建议使用pageX和pageY，因为它们是normalized by 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/

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

1 个答案: