JS get mouse position (compatible with Firefox 3.6, Opera 10.10, Chrome 4.1)
<script language= "Web Effects" >
function Document.onmouseo Tutorial ver ()
{
document.all ("Txtbox"). value=event.screenx+ "X" +event.screeny;
}
private void Button1_Click (object sender, System.EventArgs e)
{
This. Textbox1.text=txtbox. Value;
}
Full instance
**
* Get the mouse position on the page
* @param EV-triggered event
* @return x: The horizontal position of the mouse on the page, Y: The vertical position of the mouse on the page
*/
function Getmousepoint (EV) {
Define the position of the mouse in the window
var point = {
x:0,
y:0
};
If the browser supports pageYOffset, get the distance between the page and the window through Pagexoffset and pageYOffset
if (typeof window.pageyoffset!= ' undefined ') {
Point.x = Window.pagexoffset;
Point.y = Window.pageyoffset;
}
If the browser supports Compatmode, and the DOCTYPE is specified, the documentelement gets the scrolling distance between the page and the window
In IE, when the page specifies DOCTYPE, the value of the Compatmode is Css1compat, otherwise the Compatmode value is Backcompat
else if (typeof document.compatmode!= ' undefined ' && document.compatmode!= ' Backcompat ') {
Point.x = Document.documentElement.scrollLeft;
Point.y = Document.documentElement.scrollTop;
}
If the browser supports Document.body, you can get the scrolling height by document.body
else if (typeof document.body!= ' undefined ') {
Point.x = Document.body.scrollLeft;
Point.y = Document.body.scrollTop;
}
Add the mouse position in the window
Point.x + = Ev.clientx;
Point.y + = Ev.clienty;
Returns the position of the mouse in the window
return point;
}
Browsers other than IE (I've tested Firefox 3.6, Opera 10.10, Chrome 4.1, and Safari 4.0.4) can use Pagexoffset and pageyoffset to get the horizontal and vertical distances between pages and Windows. But IE (I tested IE6, IE7, IE8) can only get the distance between the page and the window through the scrolling displacement, and there is a deviation of one to two pixels.
And look at an application example Html+js
<script language= "javascript" type= "Text/javascript"
<!--
Var Domtype = ';
if (document.all) {
domtype = "ie4";
} else if (document.getElementById) {
domtype = "Std"; } else if (document.layers) {
domtype = ' ns4 ';
}
Function Initmousemove () {
if (!document.all) {
document.captureevents (event.mousemove);
&NBSP}
document.onmousemove = MouseMove;
}
function MouseMove (e) {
var x,y
if (!document.all) {
fetch_object ("TXT"). Value= " Move ";
X=e.pagex;
Y=e.pagey;
}else{
x=document.body.scrollleft+event.clientx
y=document.body.scrolltop+ Event.clienty;
}
fetch_object ("TXT"). value=x+ ":" +y;
}
Var objects=new Array ();
function Fetch_object (idname, Forcefetch) {
if (Forcefetch | | typeof (Objects[idname]) = = "undefined") {
Switch (domtype) {
Case "Std": {
Objects[idname] = document.getElementById (idname);
}
Break
Case "ie4": {
Objects[idname] = Document.all[idname];
}
Break
Case "NS4": {
Objects[idname] = Document.layers[idname];
}
Break
}
}
return Objects[idname];
}
-->
</script>
<title>get Mouse position</title>
<body onload= "Initmousemove ()" >
<input id= "txt"/>
</body>
-------------------------------------------------------------------------------------------------
Overall:
X=document.body.scrollleft+event.clientx; Gets the x-coordinate of the current mouse position
Y=document.body.scrolltop+event.clienty; Gets the y-coordinate of the current mouse position
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
