层的拖动与图片切换冲突的问题
作者：Hily 原始链接：http://hily.me/blog/2006/02/layer-drag-confict-image-switch/
版权声明：可以转载，转载时务必以超链接形式标明文章原始出处和作者信息及版权声明
我在几个月前写的那篇《IE和FireFox中层的拖动详解》里实现了在浏览器中层的拖动效果，今天要在其基础实现图片的切换，实现过程中碰到了一个问题，在这里把解决过程写出来。
首先通过onmouseover和onmouseout事件设置鼠标移入移出时要切换图片，代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById('drag').onmouseover=function(){this.firstChild.src='http://www.baidu.com/img/logo.gif';};
document.getElementById('drag').onmouseout=function(){this.firstChild.src='http://www.google.com/intl/en/images/logo.gif';};
drag(document.getElementById('drag'),[200,400,30,30]);
};function drag(o,r){
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head><body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
以上代码在在FireFox下测试通过，而在IE下会出现问题。当鼠标点下并拖动图片时，让鼠标往图片外移动，使鼠标指针离开图片，然后松开鼠标，这时图片本应变为Google的图样，而在IE中则仍然是Baidu的图样。
经过检测，我发现IE在onmouseup时发生了onmouseover事件，而此时鼠标指针已经不在图片上了，因此onmouseout的事件就无法激活，图片将始终保持Baidu图样。
要解决这个问题，就要在鼠标松开的时候，即onmouseup事件中加入onmouseout图片切换的代码，让图片变回Google图样。这样还不够，还要在onmousedown事件中加入onmouseover图片切换的代码，否则如果鼠标松开后指针仍然停留在图片上，此时再点击下去就无法使图片变为Baidu图样。修正后效果就和在FireFox下的一样啦，代码如下：
<html>
<head>
<title> Drag Demo 3 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById('drag').onmouseover=function(){this.firstChild.src='http://www.baidu.com/img/logo.gif';};
document.getElementById('drag').onmouseout=function(){this.firstChild.src='http://www.google.com/intl/en/images/logo.gif';};
drag(document.getElementById('drag'),[200,400,30,30]);
};function drag(o,r){
o.firstChild.onmousedown=function(){return false;};
o.onmousedown=function(a){
o.onmouseover.call(o);
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
};d.onmouseup=function(){
o.onmouseout.call(o);
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head><body>
<div id="drag"><img src="http://www.google.com/intl/en/images/logo.gif" style="width:100%;height:100%" /><div>
</body>
</html>
为了避免代码冗余，我只是在d.onmousedown和onmouseup中分别增加了一行代码:"o.onmouseover.call(o);"和"o.onmouseout.call(o);"，它们的意思就是执行o.onmouseover和o.onmouseout这两个事件指向的函数，".call(o)"表示在o这个对象上执行函数。
-- EOF --
