<!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>
鼠标纵坐标:
<input id=mouseYPosition>
</fieldset>
左:上:宽:高::<input id="theposition" type="text"/>
</div>
</div>
</body>
</html>
分享到：
相关推荐
用 javascript 获取当页面上鼠标（光标）位置 和 触发事件的对象 的方法
Javascript元素位置、大小、鼠标定位操作
javascript获取指针的位置的方法：使用事件对象的pageX和pageY，或者clientX和clientY属性，并且配合scrollLeft和scrollTop属性，这样就可以计算出指针的位置了。 本文操作环境：windows10系统、javascript 1.8.5...
用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同，这里...
有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性: 1、客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置...
JavaScript实现浏览器网页自动滚动并点击的示例代码 1. 打开浏览器控制台窗口 ...2. 实时查看鼠标坐标 首先为了获取当前的鼠标位置的x、y坐标，需要先重写一个onmousemove函数来帮助我们实时查看光标处的x、
实例180 获取页面中的全部超级链接 281 实例181 将网站设为首页 282 实例182 单击鼠标右键自动链接到指定网站 283 实例183 单击超级链接将本页加入收藏夹 285 实例184 访问指定的链接地址 286 实例185 返回默认主页 ...
主要介绍了JS实现在线统计一个页面内鼠标点击次数的方法,实例分析了javascript操作Cookie实现计数的技巧,需要的朋友可以参考下
21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 ...
主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
是鼠标在页面上获取坐标的代码， JavaScript的相关代码， 比较一般，希望大家支持一下
页面JS光标/鼠标坐标，百度统计中有个热点统计图，我们要做的就是获取光标的像素坐标
第14章 JavaScript网页特效 387 14.1 文字特效 387 14.1.1 文字向上不间断无缝滚动 387 14.1.2 灼热的文字（IE） 389 14.1.3 标题栏文字循环向左移动 391 14.1.4 各种形式输出文字 392 14.1.5 跑马灯式说明文字 398 ...
21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 ...
6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...
JS获取鼠标坐标，获取鼠标像素点的典型实例，运行本页面后，随意移动鼠标的位置，可适时显现鼠标的坐标点，不占用系统资源 。 JavaScript获取鼠标坐标 .tip { width:200px; border:2px solid #ddd; padding:8px;...
实例365 远程获取其他网页情报 591 实例366 树状导航菜单 594 实例367 使用XML实现不刷新页面查询数据 596 第16章 JavaScript与JSP结合 601 16.1 窗口与对话框 602 实例368 弹出提示对话框并重定向网页 ...
第14章 JavaScript网页特效 14．1 文字特效 14．1．1 文字向上不间断无缝滚动 14．1 12灼热的文字(IE) 14．1．3 标题栏文字循环向左移动 14．1．4 各种形式输出文字 14．1．5 跑马灯式说明文字 14．1．6 跳动的文字 ...