当前位置: 代码迷 >> JavaScript >> 弹出层有关问题,除了ie外,好像 event.clientX无效
  详细解决方案

弹出层有关问题,除了ie外,好像 event.clientX无效

热度:112   发布时间:2012-03-11 18:15:39.0
弹出层问题,除了ie外,好像 event.clientX无效
写了个简单的鼠标悬停显示大图的代码,发现在firebox下有问题!
<HTML>
<HEAD>
<TITLE>   </TITLE>
<script   type= "text/javascript ">

function   showTip(){
var   div3   =   document.getElementById( 'div3 ');  
div3.style.display= "block ";  
div3.style.left=event.clientX;  
div3.style.top=event.clientY;
div3.style.position= "absolute ";  
}

function   closeTip(){
var   div3   =   document.getElementById( 'div3 ');
div3.style.display= "none ";
}


</script>
</HEAD>
<BODY>
<img   src= "1.JPG "   onmousemove= "showTip() "   onmouseout= "closeTip() ">

<div   id= "div3 "   style= "display:none; "> <img   src= "2.JPG ">
</div>
</BODY>
</HTML>


应该怎么修改?同时要兼容ie和ff,现在ff的显示效果就是div3正好就在1.jpg的下方,没有获得event.clientX   Y的值

------解决方案--------------------
ie以外用e.pageX
------解决方案--------------------
汗水嗒嗒
要判断浏览器的啊
还要根据浏览器的不同用不同的事件模型
------解决方案--------------------
function showTip(e){
event = window.event || e;
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}

在FIREFOX中,ENENT要显示的传给函数

onmousemove= "showTip(event) "


------解决方案--------------------
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">

function showTip(e){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=e.clientX;
div3.style.top=e.clientY;
div3.style.position= "absolute ";
}

function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}


</script>
</HEAD>
<BODY>
<img src= "m05.gif " onmousemove= "showTip(event) " onmouseout= "closeTip() ">

<div id= "div3 " style= "display:none; "> <img src= "m05_.gif ">
</div>
</BODY>
</HTML>
这样看看
  相关解决方案