blocks|key|1129717|text|您可以使用pageX+and+pageY来获取鼠标在窗口中的位置。您还可以使用jQuery的offset来获取元素的位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1129718|因此，离图像左侧的距离应该是pageX+-+offset.left，离图像顶部的距离应该是pageY+-+offset.top。|1129719|下面是一个示例：|1129720|$(document).ready(function()+{
++$('img').click(function(e)+{
++++var+offset+=+$(this).offset();
++++alert(e.pageX+-+offset.left);
++++alert(e.pageY+-+offset.top);
++});
});|code-block|syntax|javascript|1129721|我已经做了一个live+example+here，here是它的源码。|1129722|要计算离底部或右侧有多远，必须使用jQuery的width和height方法。|1129723|entityMap|0|LINK|mutability|MUTABLE|url|http://www.javascriptkit.com/jsref/event.shtml|1|http://docs.jquery.com/CSS/offset|2|http://jsbin.com/akiwo|3|http://jsbin.com/akiwo/edit|4|http://docs.jquery.com/CSS/width|5|http://docs.jquery.com/CSS/height^0|5|5|F|5|1A|6|5|F|0|1A|6|1|0|E|J|19|I|0|0|0|7|H|2|P|4|3|0|O|5|U|6|O|5|4|U|6|5|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]|$9|1K|A|1L|1|1M]]|E|$]]|$1|F|3|G|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1S|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1T|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]|$9|1Y|A|1Z|1|20]]|E|$]]|$1|Q|3|R|5|6|7|21|8|@$9|22|A|23|B|C]|$9|24|A|25|B|C]]|D|@$9|26|A|27|1|28]|$9|29|A|2A|1|2B]]|E|$]]|$1|S|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]|14|$5|V|W|X|E|$Y|15]]|16|$5|V|W|X|E|$Y|17]]|18|$5|V|W|X|E|$Y|19]]]]

You can use <a href="http://www.javascriptkit.com/jsref/event.shtml" rel="noreferrer"><code>pageX</code> and <code>pageY</code></a> to get the position of the mouse in the window. You can also use jQuery's <a href="http://docs.jquery.com/CSS/offset" rel="noreferrer"><code>offset</code></a> to get the position of an element.

So, it should be <code>pageX - offset.left</code> for how far from the left of the image and <code>pageY - offset.top</code> for how far from the top of the image.

Here is an example:

<pre><code>$(document).ready(function() {
 $('img').click(function(e) {
 var offset = $(this).offset();
 alert(e.pageX - offset.left);
 alert(e.pageY - offset.top);
 });
});
</code></pre>

I've made a <a href="http://jsbin.com/akiwo" rel="noreferrer">live example here</a> and <a href="http://jsbin.com/akiwo/edit" rel="noreferrer">here</a> is the source.

To calculate how far from the bottom or right, you would have to use jQuery's <a href="http://docs.jquery.com/CSS/width" rel="noreferrer"><code>width</code></a> and <a href="http://docs.jquery.com/CSS/height" rel="noreferrer"><code>height</code></a> methods.

blocks|key|1129750|text|注意！e.clientX+&+e.clientY与e.pageX和e.pageY之间是有区别的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1129751|尝试这两种方法，并确保您使用的是正确的方法。基于滚动位置的clientX和clientY的变化|1129752|entityMap^0|3|9|F|9|P|7|X|7|0|T|7|11|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

note! there is a difference between <code>e.clientX</code> &amp; <code>e.clientY</code> and <code>e.pageX</code> and <code>e.pageY</code>

try them both out and make sure you are using the proper one. <code>clientX</code> and <code>clientY</code> change based on scrolling position

blocks|key|1345074|text|下面是一个更好的脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1345075|$('#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:+"+%2B+left+%2B+"+Top:+"+%2B+top);

});|code-block|syntax|javascript|1345076|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is a better script:

<pre><code>$('#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);

});
</code></pre>

blocks|key|1129837|text|下面的代码总是有效的，即使有任何图像使窗口滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1129838|$(function()+{
++++$("#demo-box").click(function(e)+{

++++++var+offset+=+$(this).offset();
++++++var+relativeX+=+(e.pageX+-+offset.left);
++++++var+relativeY+=+(e.pageY+-+offset.top);

++++++alert("X:+"+%2B+relativeX+%2B+"++Y:+"+%2B+relativeY);

++++});
});|code-block|syntax|javascript|1129839|参考：http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/|offset|length|1129840|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/^0|0|0|3|1S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The below code works always even if any image makes the window scroll.

<pre><code>$(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);

 });
});
</code></pre>

Ref: <a href="http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/">http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/</a>

blocks|key|1345046|text|看一下http://jsfiddle.net/TroyAlford/ZZEk8/，看看下面的工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1345047|<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:+'+%2B+x+%2B+',+y:+'+%2B+y);
++++++++});
++++});
</script>|code-block|syntax|javascript|1345048|请注意，上面的代码将得到相对于图像框的x和y-但不会正确考虑边距、边框和填充。在你的例子中，这些元素实际上不是图像的一部分--但它们可能是你想要考虑的元素的一部分。|1345049|在这种情况下，您还应该使用$div.outerWidth(true)+-+$div.width()和$div.outerHeight(true)+-+$div.height()来计算边距/边框/等的数量。|style|CODE|1345050|您的新代码可能看起来更像：|1345051|<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+%2B+xMargin)+-+offset.left;
++++++++++++var+y+=+(ev.clientY+%2B+yMargin)+-+offset.top;

++++++++++++alert('clicked+at+x:+'+%2B+x+%2B+',+y:+'+%2B+y);
++++++++});
++++});
</script>|1345052|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TroyAlford/ZZEk8/^0|3|11|0|0|0|0|D|10|1E|12|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|16|8|@$A|17|B|18|M|N]|$A|19|B|1A|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1C|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

Take a look at <a href="http://jsfiddle.net/TroyAlford/ZZEk8/" rel="nofollow">http://jsfiddle.net/TroyAlford/ZZEk8/</a> for a working example of the below:

<pre><code>&lt;img id='myImg' src='/my/img/link.gif' /&gt;

&lt;script type="text/javascript"&gt;
 $(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);
 });
 });
&lt;/script&gt;
</code></pre>

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.

In this case, you should also use <code>$div.outerWidth(true) - $div.width()</code> and <code>$div.outerHeight(true) - $div.height()</code> to calculate the amount of margin / border / etc.

Your new code might look more like:

<pre><code>&lt;img id='myImg' src='/my/img/link.gif' /&gt;

&lt;script type="text/javascript"&gt;
 $(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);
 });
 });
&lt;/script&gt;
</code></pre>

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

getting the X/Y coordinates of a mouse click on an image with jQuery

jQuery

我想使用jQuery来获取图像上单击事件的X/Y坐标。坐标应相对于图像，而不是相对于整个页面

问使用jQuery获取鼠标单击图像的X/Y坐标
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取鼠标单击图像的X/Y坐标EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取鼠标单击图像的X/Y坐标
EN