层的拖动与图片切换冲突的问题

  我在几个月前写的那篇《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 —

《层的拖动与图片切换冲突的问题》有16个想法

  1. You really make it appear so easy along with your presentation however I in finding this topic to be actually one thing that I feel I might by no means understand. It sort of feels too complex and extremely broad for me. I’m taking a look ahead in your next put up, I¡¦ll attempt to get the hang of it!

  2. I’d should gipelris test with you here. Which isn’t one thing I normally do! I take pleasure in reading a post that may make folks think. Additionally, thanks for permitting me to remark!

发表评论

电子邮件地址不会被公开。 必填项已用*标注