js 取得鼠标的坐标
日期：2014-05-16 浏览次数：20331 次
js 获得鼠标的坐标
event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
一般用event.clientX 和event.clientY的比较多！
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();
//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}
}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){
var oldvalue = bijiao(obj.name)
if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
my_tips.style.left=event.clientX+120+document.body.scrollLeft;
my_tips.style.top=document.body.scrollTop+event.clientY
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>
<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
例子2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META
event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
一般用event.clientX 和event.clientY的比较多！
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();
//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}
}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){
var oldvalue = bijiao(obj.name)
if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
my_tips.style.left=event.clientX+120+document.body.scrollLeft;
my_tips.style.top=document.body.scrollTop+event.clientY
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>
<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
例子2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
