使用 jQuery 获取鼠标单击图像的 X/Y 坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2159044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting the X/Y coordinates of a mouse click on an image with jQuery
提问by Ron Harlev
I would like to use jQuery to get the X/Y coordinates of a click event on an image. The coordinates should be relative to the image, not relative to the whole page
我想使用 jQuery 来获取图像上单击事件的 X/Y 坐标。坐标应该是相对于图像，而不是相对于整个页面
回答by Brian McKenna
You can use pageXand pageYto get the position of the mouse in the window. You can also use jQuery's offsetto get the position of an element.
您可以使用pageX和pageY来获取鼠标在窗口中的位置。您还可以使用 jQueryoffset来获取元素的位置。
So, it should be pageX - offset.leftfor how far from the left of the image and pageY - offset.topfor how far from the top of the image.
因此，它应该是pageX - offset.left离图像左侧pageY - offset.top多远以及离图像顶部多远。
Here is an example:
下面是一个例子：
$(document).ready(function() {
$('img').click(function(e) {
var offset = $(this).offset();
alert(e.pageX - offset.left);
alert(e.pageY - offset.top);
});
});
I've made a live example hereand hereis the source.
To calculate how far from the bottom or right, you would have to use jQuery's widthand heightmethods.
回答by Adam
note! there is a difference between e.clientX& e.clientYand e.pageXand e.pageY
笔记！e.clientX&e.clientY和e.pageXand之间有区别e.pageY
try them both out and make sure you are using the proper one. clientXand clientYchange based on scrolling position
试一试，确保你使用的是正确的。clientX并clientY根据滚动位置进行更改
回答by rckehoe
Here is a better script:
这是一个更好的脚本：
$('#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);
});
回答by itsazzad
The below code works always even if any image makes the window scroll.
即使任何图像使窗口滚动，以下代码也始终有效。
$(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);
});
});
Ref: http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
参考：http: //css-tricks.com/snippets/jquery/get-xy-mouse-coordinates/
回答by Troy Alford
Take a look at http://jsfiddle.net/TroyAlford/ZZEk8/for a working example of the below:
查看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>
Note that the above will get you the x and the y relative to the image's box - but will not correctly take into account margin, border and padding. These elements aren't actually part of the image, in your case - but they might be part of the element that you would want to take into account.
请注意，以上将获得相对于图像框的 x 和 y - 但不会正确考虑边距、边框和填充。在您的情况下，这些元素实际上不是图像的一部分 - 但它们可能是您想要考虑的元素的一部分。
In this case, you should also use $div.outerWidth(true) - $div.width()and $div.outerHeight(true) - $div.height()to calculate the amount of margin / border / etc.
在这种情况下，您还应该使用$div.outerWidth(true) - $div.width()和$div.outerHeight(true) - $div.height()来计算边距/边框/等的数量。
Your new code might look more like:
您的新代码可能看起来更像：
<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>
