用jQuery获取鼠标点击图像的X / Y坐标
我想使用jQuery来获取图像上的点击事件的X / Y坐标。 坐标应该是相对于图像，而不是相对于整个页面
您可以使用pageX和pageY来获取鼠标在窗口中的位置。 你也可以使用jQuery的offset来获取元素的位置。
所以，它应该是pageX - offset.left距离图像左侧多远， pageY - offset.top距离图像顶部多远。
这里是一个例子：
$(document).ready(function() { $('img').click(function(e) { var offset = $(this).offset(); alert(e.pageX - offset.left); alert(e.pageY - offset.top); }); });
我在这里做了一个实例 ， 这里是源代码。
要计算从底部或右侧多远，你将不得不使用jQuery的width和height方法。
注意！ e.clientX ＆ e.clientY和e.pageX和e.pageY是有区别的
试试他们两个，确保你使用正确的。 clientX和clientY根据滚动的位置而改变
这是一个更好的脚本：
$('#mainimage').click(function(e) { var offset_t = $(this).offset().top - $(window).scrollTop(); var offset_l = $(this).offset().left - $(window).scrollLeft(); var left = Math.round( (e.clientX - offset_l) ); var top = Math.round( (e.clientY - offset_t) ); alert("Left: " + left + " Top: " + top); });
下面的代码始终工作，即使任何图像使窗口滚动。
$(function() { $("#demo-box").click(function(e) { var offset = $(this).offset(); var relativeX = (e.pageX - offset.left); var relativeY = (e.pageY - offset.top); alert("X: " + relativeX + " Y: " + relativeY); }); });
参考： http ： //css-tricks.com/snippets/jquery/get-xy-mouse-coordinates/
看看http://jsfiddle.net/TroyAlford/ZZEk8/下面的工作示例：;
<img id='myImg' src='/my/img/link.gif' /> <script type="text/javascript"> $(document).bind('click', function () { // Add a click-handler to the image. $('#myImg').bind('click', function (ev) { var $img = $(ev.target); var offset = $img.offset(); var x = ev.clientX - offset.left; var y = ev.clientY - offset.top; alert('clicked at x: ' + x + ', y: ' + y); }); }); </script>
请注意，上面将会得到x和y相对于图像的框 – 但不会正确地考虑到边距，边框和填充。 这些元素实际上并不是图像的一部分，在你的情况下 – 但它们可能是你想要考虑的元素的一部分。
在这种情况下，您还应该使用$div.outerWidth(true) - $div.width()和$div.outerHeight(true) - $div.height()来计算边距/边框的数量等。
您的新代码可能看起来更像：
<img id='myImg' src='/my/img/link.gif' /> <script type="text/javascript"> $(document).bind('click', function () { // Add a click-handler to the image. $('#myImg').bind('click', function (ev) { var $img = $(ev.target); var offset = $img.offset(); // Offset from the corner of the page. var xMargin = ($img.outerWidth() - $img.width()) / 2; var yMargin = ($img.outerHeight() - $img.height()) / 2; // Note that the above calculations assume your left margin is // equal to your right margin, top to bottom, etc. and the same // for borders. var x = (ev.clientX + xMargin) - offset.left; var y = (ev.clientY + yMargin) - offset.top; alert('clicked at x: ' + x + ', y: ' + y); }); }); </script>
试图编辑上面接受的答案，但stackoverflow似乎马车此刻。
不要忘记边界！ 你点击的元素边框的宽度会影响偏移量，所以你的答案也会受到影响。 一个5像素宽的边框将意味着你将不得不为你的x和y值添加5个像素，以使它们成为元素内实际的X和Y值。 至less在Firefox 13中是如此。
