程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> js獲得鼠標的坐標

js獲得鼠標的坐標

編輯：關於JSP

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 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();

}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){

var top = obj.offsetTop;
var left = obj.offsetLeft;
var objWidth = obj.offsetWidth;
var objHeight = obj.offsetHeight;
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 -26
my_tips.style.left = left + objWidth;
my_tips.style.top=top;
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>