MozTW 討論區
https://forum.moztw.org/

請教一個event.clientX取Mouse當前坐標的問題
https://forum.moztw.org/viewtopic.php?f=13&t=17985		 第 1 頁 (共 1 頁)
發表人:  joehwang [ 2007-03-15, 01:08 ]
文章主題 :  請教一個event.clientX取Mouse當前坐標的問題
我寫了一段code想讓鼠標移到某些字時讓div tag出現在該字的下方
在IE裡可以跑了，不過FF不行，不知道是不是event.clientx的問題?有人遇過這種問題嗎，謝謝大家
範例:http://joehwang.myweb.hinet.net/1.htm
代碼:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>test</title>

<style type="text/css">
<!--
.popwin {
   font-family: Arial, Helvetica, sans-serif;
   
   position: absolute;
   top: 0px;
   right: 0px;
   border: 2pt solid #FFFFFF;
   background-color: #FFFBF0;
   font-size: 10pt;
   height: 100px;
   width: 100px;
}
-->
</style>
</head>


<script>
//單字pop程式
function popword(e){//設定出現的位置
//document.getElementById("popwin").style.left=(window.event.offsetX)+150;
//document.getElementById("popwin").style.top=(window.event.offsetY)+40;

document.getElementById("popwin").style.left=event.clientX+document.body.scrollLeft+10;
document.getElementById("popwin").style.top=event.clientY+document.body.scrollTop+10;
}
function popstart(a,b,c){//帶入中文、詞性、單字，啟動單字pop
document.getElementById("popwin").style.display="block";
document.getElementById("popwin").innerHTML="<div class=poptop>"+c+"</div><div class=popdown>"+a+b+"</div>";
document.onmousemove=popword;
}
function popclose(){//關掉單字pop
document.getElementById("popwin").style.display="None"

}
//單字pop結束
</script>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><a onMouseOver="popstart('test','test','test')" onmouseout="popclose()">點我</a></p>
<span id="popwin" class="popwin"></span>
</body>
</html>
發表人:  legnaleurc [ 2007-03-15, 01:11 ]
文章主題 : 
我記得IE的DOM樹和其他有點不太一樣
你試試把event當成引數傳進函式裡看看
發表人:  joehwang [ 2007-03-16, 00:26 ]
文章主題 : 
哈，改好了，原來是要加"px"，且popword()這function在FF中需要帶引數(mouse事件)，而ie不能帶引數，把改好的code分享的大家。
代碼:
<!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=big5" />
<title>test</title>

<style type="text/css">
<!--
.popwin {
   font-family: Arial, Helvetica, sans-serif;
   
   position: absolute;
   top: 0px;
   right: 0px;
   border: 2pt solid #FFFFFF;
   background-color: #FFFBF0;
   font-size: 10pt;
   height: 100px;
   width: 100px;
}
-->
</style>
</head>


<script>
//單字pop程式
function popword(e){//設定出現的位置
//document.getElementById("popwin").style.left=(window.event.offsetX)+150;
//document.getElementById("popwin").style.top=(window.event.offsetY)+40;

if(!e) e=window.event;
//firefox要有mouse事件傳進來，而IE傳進來會出錯，在此判斷使兩者相容

document.getElementById("popwin").style.left=e.clientX+10+"px";
document.getElementById("popwin").style.top=e.clientY+10+"px";
}
function popstart(a,b,c,event){//帶入中文、詞性、單字，啟動單字pop
document.getElementById("popwin").style.display="block";
document.getElementById("popwin").innerHTML="<div class=poptop>"+c+"</div><div class=popdown>"+a+b+"</div>";
document.onmousemove=popword;
//在網頁上做move的動作會引發popword的function
}
function popclose(){//關掉單字pop
document.getElementById("popwin").style.display="None"
}
//單字pop結束
</script>

<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><a onMouseOver="popstart('test','test','test',event)" onmouseout="popclose()">點我</a></p>

<span id="popwin" class="popwin"></span>
</body>
</html>
發表人:  kourge [ 2007-03-16, 13:12 ]
文章主題 : 
忘記加 px 是我常犯的毛病XD
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/