Jquery get Mouse Coordinates
上一篇 /
下一篇 2007-12-20 11:54:29
/ 个人分类：How to?
How do I find the mouse position?
LUPA开源社区-]'L5J;h
J-KmThe details of finding the mouse position with Javascrīpt across browsers are a bit hairy; for the gruesome details check out ppk's cross-browser comparison.
"sHm5S*@s0LUPA开源社区w ?7W^ q VX-E1@/M5kjQuery makes detecting the mouse position easy. You just have to learn how to read the .pageX and .pageY attributes off of events, and they'll tell you where the mouse is (in pixels) just at the moment the event takes place.
:X5N6dZ v'd;C vQ`;A0LUPA开源社区 W5f U q#]
LUPA开源社区5b0Gt I,? eLUPA开源社区;Eim9Z&q2L
M
C
Ur|&\M8mmb0LUPA开源社区9h PN a P2oOb
Tracking mouse position
rgd7{%RX4w*o0As you can see if you move your mouse, the values are constantly read and updated as the mouse moves:
#D$F
\v]N3N0`*G0
H]u1|1p0Here's the source for that example:
LUPA开源社区"r)U?#{"^0n7Gw
LUPA开源社区 Q.dV;YU9mq
_
V.U z5E(\JF)p f0
7H)U D` r f0
<html>
*j ac-n w-J6B0<head>LUPA开源社区:r
W-PA,cob _
<scrīpt type="text/javascrīpt" src="jquery.js"></scrīpt>
m1P^x]9N3D(T0<scrīpt type="text/javascrīpt">LUPA开源社区 PW/@:}F5?9`@
jQuery(document).ready(function(){
8n3v U*g`} F T0 $().mousemove(function(e){
:HC['e&W0 $('#status').html(e.pageX +', '+ e.pageY);
9K+Ll^\#R)I&?0 });
!w+?+i5g,tU d!Jg3p0})
#BvT#W"V
[T0</scrīpt>
)x H J'P%o Y'[;D6]0<body>
Q D [.|X0<h2 id="status">LUPA开源社区sh8R-eF z
0, 0LUPA开源社区&_l3Y
[ u,ig
</h2>LUPA开源社区nr'K$\W8]^CY
</body>LUPA开源社区-JU;Hfqi
</html>
.]1RLP%Bh0
Where did they click that div?
LUPA开源社区0l B,\5H$m*w#t$B.pageX and .pageY can be read off of any event, not just .mousemove().
LUPA开源社区x7t.W(DN _1F%[
LUPA开源社区7i$l W2H0kOD+n1[rxFor example, perhaps you want to know exactly where a user clicked inside a particular div:
1c } k
j
};Ia0LUPA开源社区:GY!s I `M|-E0z
T uHere's an example where we listen for a click event inside a particular div called #special.
^
qcK-e0
<html>
U l3Iw U*?N6A0<head>
5C$`r"[5i0<scrīpt type="text/javascrīpt" src="jquery.js"></scrīpt>LUPA开源社区8{S7n7Y(N%I0~$\2z4Y},Y
<scrīpt type="text/javascrīpt">LUPA开源社区!Tv;Tt2r-n
jQuery(document).ready(function(){LUPA开源社区g$c0Lt3N^)I
$("#special").click(function(e){LUPA开源社区"AF p2z'S_
$('#status2').html(e.pageX +', '+ e.pageY);
E5wf|)xKk c3TZ0 }); LUPA开源社区 t6}xkl5S0rNV+D
})
!c E2CiA;L1A M0</scrīpt>
]o(L}d(uC`&K0<body>
%D [ A%m7W,@I0P0
{uoy
a"G mg0<h2 id="status2">
2b6R7?\s^-xF a8D g00, 0LUPA开源社区n
H,[
r
gJ,p[3IH
</h2>LUPA开源社区'hJD [a
X+M'L){
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Z7B;S#\C-|0g0Click me anywhere!
;E E
[0NJ!d e0</div>LUPA开源社区 { |-OWuq
</body>
"Yo
_ GXn O/@0</html>
5`b5U([,w0
F)PmQU3O6ay
_1^0
Vz2a.x A"S0
}jR} kW3Tp0
.H4W @qV.q0LUPA开源社区`'J}| rG(Note that the pixel values give are relative to the entire document. If you want to calculate the position within a particular element, or within the viewport, you can look at offsetY and offsetX, and do a bit of arithmetic to find the relative value.
LUPA开源社区B5OVE#m:sf9s8q0~
t }-NK_+m}1w
S `0Here is an example of finding the position within the particular element rather than the page:
Q-`8` G,} y3U0
$("#special").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('#status2').html(x +', '+ y);
});
*` x9O.t4m6n0
导入论坛
收藏
分享给好友
管理
举报
TAG:
