您现在的位置是:首页 > 电脑技术查询 > web开发

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

编辑:chaxungu时间:2022-10-02 23:20:34分类:web开发

弹出层问题,除了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>
这样看看