MozTW 討論區 • 檢視主題 - 請教一個event.clientX取Mouse當前坐標的問題

所有顯示的時間為 UTC + 8 小時

請教一個event.clientX取Mouse當前坐標的問題

第 1 頁 (共 1 頁)

[ 4 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

joehwang

文章主題 : 請教一個event.clientX取Mouse當前坐標的問題

發表於 : 2007-03-15, 01:08

我寫了一段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>

回頂端

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

legnaleurc

文章主題 :

發表於 : 2007-03-15, 01:11

註冊時間: 2006-10-27, 07:29
文章: 1068

我記得IE的DOM樹和其他有點不太一樣
你試試把event當成引數傳進函式裡看看

回頂端

Mozilla/5.0 (X11; U; Linux i686; zh-TW; rv:1.8.1.2) Gecko/20060601 Firefox/2.0.0.2 (Ubuntu-edgy)

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>