javascript获取鼠标的绝对位置event_javascript技巧

2020-11-27 来源：星星旅游

<html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
</head> 
<body onmouseMove="getXY(event)"> 
<script language="JavaScript"> 
Y:" + y; 
} 
function getX(elementID) 
{ 
var el = elementID 
return el.offsetLeft 
} 
function getY(elementID) 
{ 
var el = elementID 
return el.offsetTop 
} 
function getElementPositionX(elemID) 
{ 
var offsetTrail = document.getElementById(elemID); 
var offsetLeft = 0; 
while(offsetTrail) 
{ 
offsetLeft += offsetTrail.offsetLeft; 
offsetTrail = offsetTrail.offsetParent; 
} 
if (navigator.userAgent.indexOf("Mac") != -1 && 
typeof(document.body.leftMargin) != "undefined") { 
offsetLeft += document.body.leftMargin; 
} 
return offsetLeft; 
} 
function getElementPositionY(elemID) 
{ 
var offsetTrail = document.getElementById(elemID); 
var offsetTop = 0; 
while(offsetTrail) 
{ 
offsetTop += offsetTrail.offsetTop; 
offsetTrail = offsetTrail.offsetParent; 
} 
if (navigator.userAgent.indexOf("Mac") != -1 && 
typeof(document.body.leftMargin) != "undefined") { 
offsetTop += document.body.topMargin; 
} 
return offsetTop; 
} 
function getElementPositionXY(elemID) 
{ 
var offsetTrail = elemID; 
var offsetLeft = 24; 
var offsetTop =0; 
while(offsetTrail) 
{ 
offsetLeft += offsetTrail.offsetLeft; 
offsetTop += offsetTrail.offsetTop; 
offsetTrail = offsetTrail.offsetParent; 
} 
if (navigator.userAgent.indexOf("Mac") != -1 && 
typeof(document.body.leftMargin) != "undefined") { 
offsetLeft += document.body.leftMargin; 
offsetLeft += document.body.leftMargin; 
} 
document.getElementById("txt_left").innerText = offsetLeft; 
document.getElementById("txt_top").innerText = offsetTop; 
document.getElementById("divMsg").style.top = offsetTop + "px"; 
} 
//--> 
</ script> 
鼠标的绝对位置：<br> 
<p> 
控件输入框txtPos的绝对位置：<br> 
X：<br> 
Y：<br> 
<input type="text" name="txtPos" id="txtPos" onfocus="getElementPositionXY(this)"/> 
<p> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

全部栏目

javascript获取鼠标的绝对位置event_javascript技巧