JavaScript 获取鼠标点击位置坐标
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一、获得的坐标值相对于body时
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获得鼠标的坐标值----当需求为获得的坐标值相对于body时</title> </head>
<body>
<div style=" width:500px; margin:100px auto;">
<p id="x"></p>
<p id="y"></p>
</div>
<script type="text/javascript">
var x , y;
//当需求为获得的坐标值相对于body时，用：
function positionBody(event){
event = event||window.event;
//获得相对于body定位的横标值；
x=event.clientX
//获得相对于body定位的纵标值；
y=event.clientY
}
//应用：
document.onmousemove = function(event){
positionBody(event);
document.getElementById("x").innerHTML = "x= " + x + "px";
document.getElementById("y").innerHTML = "y= " + y + "px";
}
</script>
</body>
</html>
二、获取指导区域鼠标点击位置坐标
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获得鼠标的坐标值----当需求为获得的坐标值相对于某一对象时</title>
<style type="text/css">
*{ padding:0; margin:0;}
#objId { width:500px; height:500px; margin:auto; background:#000; line-height:500px; text-align:center; color:#fff;}
</style>
</head>
<body>
<div style=" width:500px; margin:auto; height:50px; ">
<p id="x"></p>
<p id="y"></p>
</div>
<div id="objId">ID名为objId的对象</div>
<script type="text/javascript">
var x,y;
//当需求为获得的坐标值相对于某一对象时，用：
function positionObj(event,id){
//获得对象相对于页面的横坐标值；id为对象的id
var thisX = document.getElementById(id).offsetLeft;
//获得对象相对于页面的横坐标值；
var thisY = document.getElementById(id).offsetTop;
//获得页面滚动的距离；
//注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop 为谷歌内核
var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
event = event||window.event;
//获得相对于对象定位的横标值= 鼠标当前相对页面的横坐标值- 对象横坐标值；
x = event.clientX - thisX;
//获得相对于对象定位的纵标值= 鼠标当前相对页面的纵坐标值- 对象纵坐标值- 滚动条滚动的高度；
y = event.clientY - thisY + thisScrollTop;
}
//应用：
document.getElementById("objId").onmousemove = function(event){ positionObj(event,"objId");
document.getElementById("x").innerHTML = "x= " + x + "px";
document.getElementById("y").innerHTML = "y= " + y + "px";
}
//清空设置
document.getElementById("objId").onmouseout = function(event){ document.getElementById("x").innerHTML = "";
document.getElementById("y").innerHTML = "";
}
</script>
</body>
</html>。