JS鼠标捕获DIV内选中的坐标和宽高

如题。大概有点想QQ截图工具。主要能捕获鼠标划出来的坐标，宽，高。。

解决方案 »

  1.   

    如果你draw能力够的话 木有问题你鼠标onmousedown的时候算出该事件触发时的坐标 e1.clientX e1.clientY你会拖一块区域后释放鼠标对吧，这个时候onmouseup算出e2.clientX e2.clientY这个是矩形的左上角和右下角。木有问题了吧~~~
    宽 = e2.clientX-e1.clientX
    高 = e2.clientY - e1.clientY
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鼠标捕获时间</title>
    <script language="javascript">
    function aa()
    {
    //alert('ok');]
    var e1 = window.event;
    //alert(e1.clientX);
    //alert(e1.clientY);
    document.getElementById("x").value = e1.clientX;
    document.getElementById("y").value = e1.clientY;
    }
    function bb()
    {
    //alert('ok');]
    var e1 = window.event;
    var e2 = window.event;
    //alert(e1.clientX);
    //alert(e1.clientY);
    var kk = e2.clientX-e1.clientX;
    var gg = e2.clientY-e1.clientY;
    document.getElementById("k").value = kk;
    document.getElementById("g").value = gg;
    }
    </script>
    </head><body>
    X:<input type="text" id="x" name="x" /> Y:<input type="text" id="y" name="y" /> 宽:<input type="text" id="k" name="k" /> 高:<input type="text" id="g" name="g" />
    <div style="background-image:url(太阳能 9-16.jpg); width:1123px; height:770px; border:1px solid:#000000;" onmousedown="aa()" onmouseup="bb()">
    </div>
    </body>
    </html>宽和高算不出来。帮我看看谢谢，坐标能出来了
      

  3.   

    function aa(e)
    {
    //alert('ok');]
    var e1 = e || window.event;
    //alert(e1.clientX);
    //alert(e1.clientY);
    document.getElementById("x").value = e1.clientX;
    document.getElementById("y").value = e1.clientY;
    }
    function bb(e)
    {
    //alert('ok');]
    var e1 = e || window.event;
    //alert(e1.clientX);
    //alert(e1.clientY);
    var kk = e1.clientX-document.getElementById("x").value;
    var gg = e1.clientY-document.getElementById("y").value;
    document.getElementById("k").value = kk;
    document.getElementById("g").value = gg;
    }<div style="background-image:url(太阳能 9-16.jpg); width:1123px; height:770px; border:1px solid:#000000;" onmousedown="aa(event)" onmouseup="bb(event)">