vml画区域的问题，画线一点问题都没有，但是画区域的话不知道为什么这么不灵敏？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">   
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--  
v\:*{behavior:url(#default#VML);}/*声明V为VML变量*/   
div.Layer1 {
  background: blue; 
  margin: 0px;
  width:500px;
  height:400px;
}div.Layer2{
  background: yellow;
  margin: 0px;
  width:500px;
  height:400px;
}
-->
</style>
<script language=JavaScript type=text/javascript>
var absolute_x;  //控件左上脚x坐标
var absolute_y;  //控件左上脚y坐标
function getoffset(e)   //层级递推
{ 
   absolute_y = e.offsetTop; 
   absolute_x = e.offsetLeft; 
   while(e=e.offsetParent) 
   { 
      absolute_y += e.offsetTop; 
      absolute_x += e.offsetLeft; 
   } 
} function document.onmousemove()
{
//document.getElementById("a").innerHTML = "鼠标相对X:" + window.event.x + " 鼠标相对Y:" + window.event.y;
//document.getElementById("b").innerHTML = "鼠标绝对位置X:" + window.event.screenX + " 鼠标绝对位置Y:" + window.event.screenY;
//document.getElementById("c").innerHTML = "控件位置：X：" + absolute_x; 
//document.getElementById("d").innerHTML = "控件位置：Y：" + absolute_y;
window.status = "控件位置X:"+absolute_x+" 控件位置Y:"+absolute_y+" 鼠标相对X:" + window.event.x + " 鼠标相对Y:" + window.event.y +" 鼠标绝对位置X:" + window.event.screenX + " 鼠标绝对位置Y:" + window.event.screenY;
}var x,y,a,b;
var first_x, first_y;
  
function drawline(fromX,fromY,toX,toY)
{   
  var strElement=   "<v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'></v:Line>";   
  var newPoint = document.createElement(strElement);   
  document.getElementById("Layer2").appendChild(newPoint);     
}var count = 0;
var lock = false;function draw(){ //临近点相连
    if(count > 19)
{
   alert("您的点数超过20");
   lock = true;
   return;
}
//document.getElementById("e").innerHTML = 1 + count++ ;
    if(x == undefined&&b==undefined)
    {
       x = window.event.x;
       y = window.event.y;
       first_x = x;
       first_y = y;
       return false;
    }    a=window.event.x;
    b=window.event.y;
    drawline(x,y,a,b)
    x=a;
    y=b;
    //drawline(first_x,first_y,a,b)
  }function draws()
{
  if(lock)
     return;
  
  if(x==undefined&&b==undefined)
  {
     return false;
  }
  
  if(x==window.event.x&&b==window.event.y)
  {
     return false;
  }
  
  if(document.getElementById("TempLine1"))
  {
    document.getElementById("TempLine1").outerHTML="";
  }
  
  var strElement1 = "<v:Line id='TempLine1' from='" + (x) + "," + (y) + "' to='" + (window.event.x) + "," + (window.event.y) + "' strokecolor='red'></v:Line>";   
  var newPoint1 = document.createElement(strElement1);   
  document.getElementById("Layer2").appendChild(newPoint1);
  
  
  if(document.getElementById("TempLine2"))
  {
    document.getElementById("TempLine2").outerHTML="";
  }
  
  var strElement2 = "<v:Line id='TempLine2' from='" + first_x + "," + first_y + "' to='" + (window.event.x) + "," + (window.event.y) + "' strokecolor='red'></v:Line>";   
  var newPoint2 = document.createElement(strElement2);   
  document.getElementById("Layer2").appendChild(newPoint2);
  
}</script>
</head><body onload="getoffset(document.getElementById('videoOcx')); alert(absolute_x + ' ' + absolute_y); 
alert(document.getElementById('Layer1').offsetLeft + '  ' + document.getElementById('Layer1').offsetTop)"><div id="Layer2" class="Layer2" style="position:absolute; top: 0px; left: 0px;">
  <div id="Layer1" class="Layer1" style="position:absolute; top: 0px; left: 0px;">
  <object id="videoOcx" margin="0px" width="500px" height="400px"onmousedown="draw()" onmousemove="draws()">
  </object>
  <div>
  </div>
</body>
</html>