Use JavaScript to obtain the cursor position on the page

Javascript is used to obtain the cursor position on a page in many cases, such as drag-and-drop, hover tip, and so on. Of course, we still need to face browser compatibility issues. In different browsers, the processing methods for these related properties are also different, this article describes in detail the differences between browsers in processing these attributes and the final solution.

--------------------------------------------------------------

Javascript:

 

1 < Script Type = " Text/JavaScript " >
2 // Returns the cursor position.
3 // Finishing: http://www.codebit.cn
4 // Source: http://www.webreference.com
5 Function Mouseposition (EV)
6 {
7 If (EV. pagex | Ev. Pagey)
8 {
9 Return  
10 {X: eV. pagex, Y: eV. Pagey };}
11 Return  
12 {
13 X: eV. clientx + Document. Body. scrollleft - Document. Body. clientleft, Y: eV. clienty + Document. Body. scrolltop - Document. Body. clienttop };}
14 < / SCRIPT>

The aboveCodeWe are currently using this requirement, so we separate this code into an article.ArticleFor beginners to query.

Usage:
Code:

1 Document. onmousemove = Mousemove;
2
3 Function Mousemove (EV ){
4 EV = EV | Window. event;
5 VaR Mousepos = Mouseposition (EV );
6 }

For a detailed description of the Code, the original article has already been introduced and is now transferred here:

First, we need to declare an evnet object. An evnet object will be activated no matter whether it is moved, clicked, or pressed. in Internet Explorer, event is a global variable and will be stored in window. event. in Firefox or other browsers, events are obtained by corresponding functions. when we assign the mousemove function to document. onmousemove, mousemove will get the mouse movement event.

To allow eV to obtain Event Events in all browsers, "| window. Event" in Firefox does not work because EV has a value assignment. EV is empty in MSIE, so the window. event is obtained.

Because we need to obtain the mouse position multiple times in this article, we have designed a mouseposition function, which contains a parameter: event.

Because we want to run in MSIE and other browsers, Firefox and other browsers use event. pagex and event. pagey indicates the position of the mouse relative to the document. If you have a 500*500 window and your mouse is in the absolute middle, the pagex and Pagey values are both 250, if you scroll down 500, Pagey will become 750.

The opposite is true for MSIE. It uses event. clientx and event. clienty to indicate the location where the mouse is equivalent to the window, rather than the document. In the same example, If you scroll down to 500, clienty is still 250. Therefore, we need to add the attributes of scrollleft and scrolltop relative to the document. Finally, the document in MSIE does not start from 0 to 0, but usually has a small border (usually 2 pixels). The border size is defined in document. body. in clientleft and clienttop, we also add these.

Fortunately, we have used the mouseposition function to solve the coordinate problem, so we don't have to worry about it.