This article will introduce to you more details about how to obtain the coordinate value of the clicked position in js.
JQUERY obtains the coordinates of the mouse.
The Code is as follows: |
Copy code |
// Obtain the mouse coordinates $ (Function (){ $ ("# Button2"). click (function (event ){
Alert (event. pageX ); Alert (event. pageY ); }); }); <Input id = "Button2" type = "button" value = "button"/> |
Js Method
When you click the mouse, you can obtain the clicked position with the javascript source code. If the current mouse position is used, you only need to change onmousedown to onmousemove.
The Code is as follows: |
Copy code |
Function mousePosition (ev) {if (ev. pageX | ev. pageY) {return {X: ev. pageX, y: ev. pageY};} return {x: ev. clientX + Document. body. scrollLeft-document. body. clientLeft, y: ev. clientY + Document. body. scrollTop-document. body. clientTop};} function MouseMove (ev) {ev = ev | window. event; var mousePos = MousePosition (ev); document. getElementById ('div1 '). value = mousePos. x; Document. getElementById ('div2'). value = mousePos. y ;} Document. onmousedown = mouseMove; |
Add in html
The X axis coordinate is:
Then you click your mouse to display its coordinates.
Instance
The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> displays the coordinates of a click. </title> <Style> Pre {color: green; padding: 10px 15px; background: # f0f0f0; border: 1px dotted #333; font: 12px/1.5 Courier New ;} Span {color: #999 ;} </Style> <Script type = "text/javascript"> Document. onclick = function (event) { Var event = event | window. event; Alert ("coordinates: [" + event. clientX + "," + event. clientY + "]") } </Script> </Head> <Body> </Body> </Html> |