How to use Javascript to obtain the current mouse position

Javascript obtains the current position of the mouse. Sometimes, we need to get the distance between the window and the mouse. In this case, we can calculate the position of the mouse before and after the page to get the desired result, the following describes several event attributes:

1. Coordinate location of customer Zone

Mouse events occur at specific locations in the browser's viewport. The location information is stored in the clientX and clientY attributes of the event object. Their values indicate the horizontal and vertical coordinates of the mouse pointer in the viewport when an event occurs (excluding the Page scrolling distance ). As shown in:

Var p = document. getElementById ("myDiv"); // gets the EventUtil element. on (p, "click", function (event) {event = EventUtil. getEvent (event); alert ("Screen coordinates:" + event. screenX + "," + event. screenY );});

Note: EventUtil. on () indicates the event of element binding, and EventUtil. getEvent (event) indicates obtaining the event object. EventUtil is a custom event object (implemented using JavaScript). It contains some cross-browser methods. For details, see another article "cross-browser event methods". If the project uses the jQuery plug-in, you can replace it with the corresponding method.

2. Page Coordinate Position

The event object attributes pageX and pageY can tell you where the event occurred on the page. In other words, these two attributes indicate the position of the mouse cursor on the page (equivalent to the coordinates of the mouse in the window + the page scroll distance ).

Var p = document. getElementById ("myDiv"); // obtain the EventUtil element whose id is "myDiv. on (p, "click", function (event) {// bind a click event = EventUtil to the element. getEvent (event); // get the event object var pageX = event. pageX, pageY = event. pageY; if (pageX === undefined) {// IE8 and earlier versions of pageX = event. clientX + (document. body. scrollLeft | document.doc umentElement. scrollLeft);} if (pageY = undefined) {pageY = event. clientY + (document. body. scrollTop | document.doc umentElement. scrollTop);} alert ("Page coordinates:" + pageX + "," + pageY );});

3. Screen Coordinate Position

The screenX and screenY attributes can be used to determine the coordinates of the mouse pointer relative to the entire screen when a mouse event occurs. As shown in:

var p = document.getElementById("myDiv");EventUtil.on(p, "click", function(event){ event = EventUtil.getEvent(event); alert("Screen coordinates: " + event.screenX + "," + event.screenY);});