Home > Web Front-end > JS Tutorial > body text

Method to obtain mouse click position coordinates based on JavaScript_Basic knowledge

WBOY
Release: 2016-05-16 17:37:23
Original
1158 people have browsed it

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 };
}



Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!