Javascript gets the mouse current position implementation method _javascript tips

Sometimes, we need to get the window drag or mouse movement distance, at this time by calculating the mouse before and after the position in the page to get the desired results, the following describes several event properties:

1, customer area coordinates position

Mouse events occur at a specific location in the browser's viewport. This location information is stored in the ClientX and ClientY properties of the event object. Their values indicate the horizontal and vertical coordinates of the mouse pointer in the viewport when the event occurs (excluding the distance from page scrolling). As shown in the following illustration:

var div = document.getElementById ("mydiv"); Gets the element
Eventutil.on (Div, "click", Function (event) {
 event = eventutil.getevent (event);
 Alert ("screen coordinates:" + Event.screenx + "," + Event.screeny);
});

Note: where Eventutil.on () is represented as an element binding event, Eventutil.getevent (event) indicates that the object was fetched. Eventutil is a custom event object (using JavaScript implementation), which contains some cross-browser methods, specifically implemented, see another article, "Some Cross-browser event methods." If the project uses a jquery plug-in, it can be replaced with a corresponding method.

2, page coordinates position

Event Object Properties Pagex and Pageycan tell you where the event occurred on the page. In other words, these two properties represent the position of the mouse cursor in the page (the position of the mouse in the window and the distance from the page scrolling).

var div = document.getElementById ("mydiv")//Get element Eventutil.on with id "mydiv"
(Div, "click", Function (event) {// Bind Click event = eventutil.getevent for element:
 //Get Event Events Object
 var Pagex = Event.pagex,pagey = Event.pagey;
 if (Pagex = = undefined) {//IE8 and earlier versions
  Pagex = Event.clientx + (Document.body.scrollLeft | | document.documentElement.scrollLeft);
 }
 if (Pagey = = undefined) {
  Pagey = event.clienty + (Document.body.scrollTop | | document.documentElement.scrollTop); c9/>}
 alert ("Page coordinates:" + Pagex + "," + Pagey);
});

3, screen coordinates position

The Screenx and Screeny properties allow you to determine the coordinate information of the mouse pointer over the entire screen when the mouse event occurs. As shown in the following illustration:

var div = document.getElementById ("mydiv");
Eventutil.on (Div, "click", Function (event) {
 event = eventutil.getevent (event);
 Alert ("screen coordinates:" + Event.screenx + "," + Event.screeny);
});
 

Article reference from "JavaScript Advanced Programming Third Edition"

Thank you for reading, I hope to help you, thank you for your support for this site!