鼠标拖动后监听不到鼠标松开事件

帮忙看下下面的程序，我的想法是，鼠标先点击平移，使toolType=3，然后在地图上单击鼠标（不松开），然后拖动鼠标到A点（假设），然后将原来地图的中心也进行同样的平移，得到新的地图中心，后台处理返回一张新的图片（以新的地图中心为中心的图片）。
问题：当进行平移时，鼠标拖动后，再松开鼠标监听不到松开鼠标事件，而是再点击一下鼠标，才进行平移（平移量是以再点一下鼠标的位置进行计算的），直接单击鼠标接着松开能监听到鼠标松开事件。
 <head>
<script language="javascript">
var ssx; 
var ssy;
var firx;  //这是定义的鼠标点击时此点的坐标
var firy;  //这是定义的鼠标点击时此点的坐标
var ptx;
var pty;
var lockmouse=false;
 var toolType = 0; 
window.onload=function()
{
var obj = document.getElementById("imgmap");//找到对象
obj.onmousedown=function(e)  //设置鼠标点下的监听事件
{
lockmouse=true;
oEvent=e||event;  //如果e为null，则oEvent=event，否则oEvent=e
//这样写是为了兼容各大浏览器，所有事件类的函数都要写
obj.mouseStart={};
obj.mouseStart.x=oEvent.clientX;
obj.mouseStart.y=oEvent.clientY;
    firx=obj.mouseStart.x-10;   
    firy=obj.mouseStart.y-10;
 }
obj.onmousemove=function(e)  // 这是监听鼠标移动
 {
 
oEvent=e||event;  //如果e为null，则oEvent=event，否则oEvent=e
var endx=oEvent.clientX-10;
var endy=oEvent.clientY-10;
if(lockmouse==true)
{
    if(toolType == 1 || toolType == 2)
{
}
else if(toolType==3)
{
var dxMove;
                  var dyMove;
dxMove = endx - firx;
dyMove = endy - firy;
// document.all.imgmap.src="maptest?toolType=3" + "&dxMove=" + dxMove + "&dyMove=" + dyMove; 
         }
    }
 }
obj.onmouseup=function(e)
{
oEvent=e||event;
   var endx = oEvent.clientX - 10;
   var endy = oEvent.clientY - 10;
if(lockmouse==true)
{
        }
if(toolType==1)
{
        document.all.imgmap.src="maptest?toolType=1" + "&ptx=" + firx + "&pty=" + firy;
      
     }
if(toolType==2)
{
          document.all.imgmap.src="maptest?toolType=2" + "&ptx=" + firx + "&pty=" + firy;

 }
    if(toolType == 3)
 {
var dxMove=0.0,dyMove=0.0;
var centerX=0,centerY=0;
centerX = 410;   //现在的这个图片的中心
centerY = 265;   
dxMove = endx - firx;
dyMove = endy - firy;
centerX =centerX - dxMove;
centerY =centerY - dyMove;
var ssxx;
var ssyy;
     ssxx =centerX - dxMove;
 ssyy =centerY - dyMove;
document.all.imgmap.src="maptest?toolType=3" + "&ptx=" + ssxx + "&pty=" + ssyy;
  }
 }
lockmouse=false;
}
}function SetZoomIn()
{
toolType = 1;

}
function SetZoomOut()
{
toolType = 2;

}
function SetPan()
{
toolType = 3;

}
 </script>
 </head>
 <body>
     <div id="imp"  style="width:800px; height:500px; border:1px solid #000; overflow:hidden;"> 
  <img id="imgmap" src="maptest" > 
     </div>
     <div>
     <INPUT TYPE="button" VALUE="放大" onclick="SetZoomIn()">
     <INPUT TYPE="button" VALUE="缩小" onclick="SetZoomOut()">
     <INPUT TYPE="button" VALUE="平移" onclick="SetPan()">
 </div>
 </body>
 再就是我怎么感觉鼠标拖动函数（onmousemove）好像没有用到啊，我也是刚开始学，看了网上一些例子弄的，希望大家能给解答下，其中不合理的地方也希望大家给指正，谢谢

解决方案 »

  1.   

    onmousemove事件可以直接写在 input 里它也是一个事件，如： <script language="javascript" type="text/javascript">
           function  ss(){
             alert("move");
           }
           function bb(){
              alert("out");
           }
         </script>
         <input type="button"  onmousemove="ss()" onmouseout="bb()"/>
      

  2.   

    为什么我点击平移后，鼠标拖动结束，地图没有平移，也就是没有监听到onmouseup事件，而是需要再点一下鼠标地图才能过去，请帮忙解答下，谢谢。我看了老长时间也不明白。
      

  3.   

    如果div中没有图片的话，可以在其中监听到鼠标拖动后松开的事件，但是当放上图片后，在图片上监听不到鼠标拖动后松开的事件。
      

  4.   

     onmouseover="" onmouseout=""  换下这两个事件 。