代码之家 › 专栏 › 技术社区 › Robert Deml

如何从图像输入中得到x&y坐标?

input image jquery javascript

Robert Deml · 技术社区 · 14 年前

我有一个图像类型的输入集:

<form id="MapForm" action="#">
    <input type="image" src="usa.jpg" id="usa_map" alt="USA"/>
</form>

我想附加一个函数,这样我就可以得到X&用户单击的Y坐标:

$('#MapForm').submit(ClickOnMap);
function ClickOnMap(data)
{
    return false;
}

我找不到X&“数据”中的Y坐标。我做错什么了?

3 回复 | 直到 14 年前

Nick Craver 14 年前

这里有一个很好的教程, in the jQuery docs :

$('#usa_map').click(function(e){

  //Grab click position, mis the offset of the image to get the position inside
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  alert('X: ' + x + ', Y: ' + y);

  //set 2 form field inputs if you want to store/post these values
  //e.g. $("#usa_map_x").val(x); $("#usa_map_y").val(y);

  //Submit the form
  $('#MapForm').submit();
});

Pointy 14 年前

我不知道我为什么要绑定到“submit”事件-图像是在“submit”按钮中还是什么?

Community miroxlav 4 年前

你不能得到 x y 价值观,因为 submit 在表格提交前执行。

从 jQuery API

... 当用户试图提交表单时,提交事件被发送到元素。。。

... 这发生在实际提交之前。。。

推荐文章

Thinkpad · Excel引用基于字符串的范围

2 年前

DwightD · Python 3中的用户输入和排序列表

6 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

6 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

6 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

Paul · 如何在输入值中包含图像

6 年前

Mose · c++中带有输入函数的Lambda auto给出错误

6 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

6 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

6 年前