从获取点击坐标通过 JavaScript

发布于 2024-11-28 09:45:18 字数 499 浏览 1 评论 0原文

示例：

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

图像表单类型的行为与 INPUT TYPE=SUBMIT 字段非常相似，但与 SUBMIT 字段不同的是，除了表单数据的其余部分之外，已激活图像的坐标也会发送回服务器。因此，当点击 input=image 时，请求将附加点击坐标，如下所示：

x=1&y=2

我的问题是，如何使用 javascript 检索这些坐标而不提交表单。

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

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

原文

Example:

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

Image form TYPE acts much like the INPUT TYPE=SUBMIT field, but unlike the SUBMIT field, the coordinates of the image that were activated are sent back to the server in addition to the rest of the form data. So - when one clicks on input=image - request will be appended with click coordinates like so:

x=1&y=2

My question is - how can one retrieve these coordinates using javascript without submitting the form.

P.S 1: I'm aware that click coordinates can be calculated in many ways. I know them and can easily use them. I'm interested in this approach only since here browser calculates everything automatically.

P.S 2:
I need to get coordinates that are relative to the image, not the document.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁把谁当真 2024-12-05 09:45:18

看起来像 offsetX、offsetY aren'在某些浏览器中不可用或不可靠。我建议使用 pageX 和 pageY 因为它们是由 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/

Looks like offsetX, offsetY aren't available or are unreliable in some browsers. I would recommend using pageX and pageY since those are normalized by jQuery. Combine that with the offset of the element being clicked and you should be in business:

$("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.
});

Example: http://jsfiddle.net/andrewwhitaker/87NYk/

回复收藏 0 原文

~没有更多了~