js拖动中出现的奇异事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            <!--
            var x, y, z, dx, dy, dragObj, divDown = false;
            window.onload = function(){
                var obj = document.getElementById("test");
                addEventHandler(obj, "mousedown", dragDiv);
                addEventHandler(obj, "mousemove", moveDiv);
                addEventHandler(obj, "mouseup", dropDiv);
            }
            
            function dragDiv(e){
                var e = e || window.event;
                dragObj = e.target ? e.target : e.srcElement;
                if (document.all) 
                    dragObj.setCapture();
                z = dragObj.style.zIndex;
                dragObj.style.zIndex = "1000";
                dragObj.style.cursor = "move";
                x = e.pageX || e.clientX;
                y = e.pageY || e.clientY;
                dx = x - dragObj.offsetLeft;
                dy = y - dragObj.offsetTop;
                divDown = true;
            }
            
            function moveDiv(e){
                var e = e || window.event;
                var tdragObj = e.target ? e.target : e.srcElement;
//                if (divDown && tdragObj == dragObj) {
                if (divDown) {
                    x = e.pageX || e.clientX;
                    y = e.pageY || e.clientY;
                    dragObj.style.left = x - dx + "px";
                    dragObj.style.top = y - dy + "px";
                }
            }
            
            function dropDiv(){
                divDown = false;
                dragObj.style.zIndex = z;
                dragObj.style.cursor = "auto";
                removeEventHandler(dragObj, "mousedown", dragDiv);
                removeEventHandler(dragObj, "mousemove", dragDiv)
                if (document.all) 
                    dragObj.releaseCapture();
            }
            
            function addEventHandler(oTarget, sEventType, fnHandler){
                if (oTarget.addEventListener) {
                    oTarget.addEventListener(sEventType, fnHandler, false);
                }
                else 
                    if (oTarget.attachEvent) {
                        oTarget.attachEvent("on" + sEventType, fnHandler);
                    }
                    else {
                        oTarget["on" + sEventType] = fnHandler;
                    }
            }
            
            function removeEventHandler(oTarget, sEventType, fnHandler){
                if (oTarget.removeEventListener) {
                    oTarget.removeEventListener(sEventType, fnHandler, false);
                }
                else 
                    if (oTarget.detachEvent) {
                        oTarget.detachEvent("on" + sEventType, fnHandler);
                    }
                    else {
                        oTarget["on" + sEventType] = null;
                    }
            }
            
            -->
        </script>
    </head>
    <body>
        <div id="test" style="width:250px;height:150px;background-color:#FFC184;position:absolute;top:10px;left:10px;">
        </div>
    </body>
</html>

解决方案 »

  1.   

    主要的原因就是没有 设置 setCapture和releaseCapture,
    原来代码中是有的，但被注释掉了。
    可能是为了兼容FF的原因吧。
    我把注释去掉了，并加了个判断。另外，楼主在mouseup事件中，
    将mousedown及mousemove的事件侦听都romove了。
    这样的话，对象只能够被拖放一次。
    楼主是特意这么做的吗？
      

  2.   

    如2楼所说 没有setCapture和releaseCapture就会造成脱节 当鼠标移除浏览器范围也会出问题
    为什么要在remove监听mousedown mousemove?