Method to obtain mouse click position coordinates based on JavaScript_Basic knowledge

In some DOM operations, we often deal with the position of elements. Mouse interaction is a frequently used aspect. What is disappointing is that different browsers will have different results and even some browsers may not. As a result, this article makes some simple summaries on obtaining the coordinates of the mouse click position. There is no special statement that the code is tested and compatible under IE8, FireFox, and Chrome

The coordinates of the mouse click position

Relative to screen

If it involves a mouse click to determine the position, it is relatively simple. After obtaining the mouse click event, the events screenX and screenY obtain the click position relative to the left and top margins of the screen. Iframe factors are not considered. Different browsers The performance is fairly consistent.

Copy code The code is as follows:

function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
}

relative to the browser window

Simple code can be implemented, but this is not enough, because in most cases we want to get the coordinates of the mouse click position relative to the browser window, and the clientX and clientY attributes of the event are respectively Indicates that the mouse click position is relative to the left margin and top margin of the document. So similarly we wrote code like this

Copy code The code is as follows:

function getMousePos (event) {
      var e = event || window.event;
                return {'x':e.client 🎜>Relative document

There is no problem with simple testing, but clientX and clientY obtain coordinates relative to the current screen, ignoring page scrolling factors, which is very difficult under many conditions. Useful, but what about when we need to consider page scrolling, that is, coordinates relative to the document (body element)? Just add the scrolling displacement. Next we try to calculate the scrolling displacement of the page.
In fact, the problem will be much simpler under Firefox, because Firefox supports the attributes pageX and pageY. These two attributes already take page scrolling into account. In Chrome, you can calculate the page scroll displacement through document.body.scrollLeft and document.body.scrollTop, while in IE, you can use document.documentElement.scrollLeft and document.documentElement.scrollTop


Copy code

The code is as follows:function getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollY = document.documentElement.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 };
}