javascript 获取当页面上鼠标位置

最新推荐文章于 2024-08-14 08:01:05 发布

l344438713

最新推荐文章于 2024-08-14 08:01:05 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/l344438713/article/details/83529593

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用 javascript 获取当页面上鼠标（光标）位置 - event, window, 事件, position, 位置, mouse, 光标, 鼠标, </title>
</head>
<body> 
<div style="z-index::0; left:0px; top:0px;">
<script type="text/javascript"> 
//------------------------------相应鼠标移动事件------------------------------
function mousePosition(ev){
if(ev.pageX || ev.pageY){
   return {x:ev.pageX, y:ev.pageY};
}
return {
   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
   y:ev.clientY + document.body.scrollTop - document.body.clientTop

//计算滚动时用下面的语句: x:ev.x + document.body.scrollLeft,
//                             y:ev.y + document.body.scrollTop
};
}

document.onmousemove = mouseMove;

function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);

document.getElementById('mouseXPosition').value = mousePos.x;
document.getElementById('mouseYPosition').value = mousePos.y;
}
//------------------相应单击事件-------------------------
function mouseClickPosition1(click_ev){
if(click_ev.pageX || click_ev.pageY){
   return {x:click_ev.pageX, y:click_ev.pageY};
}
return {
   x:click_ev.clientX + document.body.scrollLeft - document.body.clientLeft,
   y:click_ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

//------------定性鼠标事件----------
document.onmousedown =mouseClick; 
var i=0;
var px=0,py=0;
function mouseClick(click_ev){
//------------记录鼠标事件----------
    click_ev = click_ev || window.event;
    var mousePos = mousePosition(click_ev);
if(i==0)
{ 
    px=mousePos.x;
    py=mousePos.y;
    $('theposition').value = mousePos.x+","+mousePos.y; 
}
else
{
    var width=mousePos.x-px;
    var height=mousePos.y-py;    
    $('theposition').value += ","+width+","+height;
} 
i=i+1;
i=i%2;
}
function $(i)
{
    return document.getElementById(i);
}
</script> 

<div id="example_main" style="z-index:2; left:0px; top:]0px;">
<fieldset>
<legend></legend>
鼠标横坐标: 
   <input id=mouseXPosition> &nbsp; 
鼠标纵坐标: 
   <input id=mouseYPosition> 
</fieldset> 
左:上:宽:高::<input id="theposition" type="text"/>
</div> 
</div> 
</body>
</html>