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

js gets the mouse click position implementation ideas and code_javascript skills

WBOY
Release: 2016-05-16 16:49:08
Original
1530 people have browsed it

Copied, but the code of the original page still needs to be modified. The following are available modifications

Commonly used are event.clientX and event.clientY to obtain the horizontal and vertical positions respectively, but only using this method is not enough. Yes, because the mouse position obtained by event.clientX and event.clientY is relative to the current screen, regardless of the distance scrolled by the scroll bar of the page.

Copy code The code is as follows:

function pointerX(event)
{
return event.pageX || (event.clientX (document.documentElement.scrollLeft || document.body.scrollLeft));
}

function pointerY(event)
{
return event .pageY || (event.clientY (document.documentElement.scrollTop || document.body.scrollTop));
}

The two methods respectively obtain the relative entire page (instead of the screen) The mouse position

event.pageX is supported in FF, thus realizing cross-browser operation

Just call these two functions in other methods
Copy code The code is as follows:

function getPointPosition(event)
{
var x_px_scr = event.clientX;
var y_px_scr = event.clientY;
alert("X-axis offset relative to the current screen" x_px_scr);//relative to the device (PC or mobile device)
alert("Y-axis offset relative to the current screen" y_px_scr);//relative to the device (PC or mobile device)
var x_Px_page = pointerX(event);
var y_Px_page = pointerY(event);
alert("X-axis offset relative to the entire page" x_Px_page); //relative to the browser
alert("Y-axis offset relative to the entire page" y_Px_page); //Relative to the browser
}
Related labels:
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