JavaScript code for obtaining the coordinates of the mouse position (Click position)

In javascript, we need to obtain the coordinates of the mouse position in several ways. One is the relative position (browser window, document location). Almost all of these are using document. body. scrollTop, document. body. dom commands such as scrollLeft. I will introduce several instances in detail below.

Example 1

 

The Code is as follows:

Copy code

Var xPos; Var yPos; Document. onmousemove = mouseMove; Function mouseMove (ev ){ Ev = ev window. event; Var mousePos = mouseCoords (ev ); XPos = mousePos. x; YPos = mousePos. y; } Function mouseCoords (ev ){ If (ev. pageX ev. pageY ){ Return {x: ev. pageX, y: ev. pageY }; } Return { X: ev.clientx?document.body.scrollleft?document.doc umentElement. scrollLeft, Y: ev. clientY + document. body. scrollTop + document.doc umentElement. scrollTop }; }

Obtains the coordinates of the mouse clicks.

Relative to the screen

If it is relatively simple to determine the position of a mouse click, after obtaining the mouse click event, the event screenX and screenY obtain the left margin and top margin of the click position relative to the screen, if the iframe factor is not taken into account, the performance in different browsers is still consistent.

The Code is as follows:	Copy code
Function getMousePos (event ){ Var e = event | window. event; Return {'X': e. screenX, 'y': screenY} }

Relative browser window

The Code is as follows:	Copy code
Function getMousePos (event ){ Var e = event | window. event; Return {'X': e. clientX, 'y': clientY} }

Relative document

The Code is as follows:	Copy code
Function getMousePos (event ){ Var e = event | window. event; Var scrollX = document.doc umentElement. scrollLeft | document. body. scrollLeft; Var scrollY = document.doc umentElement. scrollTop | document. body. scrollTop; Var x = e. pageX | e. clientX + scrollX; Var y = e. pageY | e. clientY + scrollY; // Alert ('x: '+ x + 'ny:' + y ); Return {'X': x, 'y': y }; }

Analysis of event location attributes in different browsers:

1. The event. x and event. y of IE are the reference points (excluding the rolling distance) of the parent element of the event trigger element)
2. The event. pageX and event. pageY of Firefox take the body element as the reference point (including the rolling distance)
3. event. clientX, event. clientY takes the upper-left corner of the browser as the reference point (excluding the rolling distance)
4. IE event. offsetX, event. offsetY and Firefox events. layerX, event. layerY uses the upper left corner of the event-triggered element's inner boundary as the reference point (including the scroll distance. When there is a border, a negative number may occur)

1. scrollHeight: get the scroll height of the object
2. scrollLeft: sets or obtains the distance between the left edge of the object and the leftmost end of the currently visible content in the window.
3. scrollTop: set or obtain the distance between the top of the object and the top of the visible content in the window.
4. scrollWidth: gets the scroll width of an object.
5. offsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
6. offsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.
7. offsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.