DIV 标签滚动出错答案

【问题标题】：Error in DIV tag scrollingDIV 标签滚动出错
【发布时间】：2012-06-14 16:56:22
【问题描述】：

我创建了一个可拖动的 div 窗口，并创建了一个可滚动的子 div（在窗口 div 中）。这些单独工作正常，但是当我尝试通过单击向上和向下滚动内部 div滚动箭头，一旦滚动完成，就会触发拖动事件。我无法解决问题....任何建议请...

这里是代码...

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <TITLE> Reporting</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
    body{
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.7em;
    }
    .Object{
    width:190px;
    height:100px;
    border:1px solid black;
    border-radius:7px 7px 7px 7px;
    box-shadow:3px 3px 2px #D2D2D2;
    position:absolute;
    resize:
    }

    .ObjHdr{
     color:#fff;
     background:#363636; 
     padding:3px 0px 3px 7px;
     border-radius:6px 6px 0px 0px;;
     font-weight:bold;
     cursor:move;
    }

    .ObjBody{
     width:190px;
     height:77px;
     overflow:scroll;
    }

    .ObjEle{
     padding:1px 0px 1px 4px;
     color:#000;
     border-bottom:1px solid black;
     cursor:pointer;
    }

    </style>

    </HEAD>
    <BODY>

     <div id="ObjCountry" class="Object">
       <div class="ObjHdr">Country</div>
       <div id =sd class="ObjBody" unselectable="on">
        <div class="ObjEle">India</div>
        <div class="ObjEle">China</div>
        <div class="ObjEle">USA</div>
        <div class="ObjEle">Iran</div>
        <div class="ObjEle">Iraq</div>
        <div class="ObjEle">Indonesia</div>
       </div>
     </div>

    </BODY>
    </HTML>

    <script>

    var DragHandler = {

        // private property.
        _oElem : null,

        // public method. Attach drag handler to an element.
        attach : function(oElem) {
            oElem.onmousedown = DragHandler._dragBegin;

            // callbacks
            oElem.dragBegin = new Function();
            oElem.drag = new Function();
            oElem.dragEnd = new Function();

            return oElem;
        },

        // private method. Begin drag process.
        _dragBegin : function(e) {
            var oElem = DragHandler._oElem = this;

            if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
            if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            e = e ? e : window.event;
            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.dragBegin(oElem,x,y);

            //document.onmousemove = DragHandler._drag;
            document.onmouseup = DragHandler._dragEnd;
            oElem.onmousemove = DragHandler._drag;
            oElem.onmouseup = DragHandler._dragEnd;
            return false;
        },

        // private method. Drag (move) element.
        _drag : function(e) {
            var oElem = DragHandler._oElem;

            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            e = e ? e : window.event;

            var tmpX = x + (e.clientX - oElem.mouseX);
            var tmpY = y + (e.clientY - oElem.mouseY);

            if(tmpX<=0){tmpX = 0;}
            if(tmpY<=0){tmpY = 0;}


            oElem.style.left = tmpX + 'px';
            oElem.style.top  = tmpY + 'px';

            oElem.mouseX = e.clientX;
            oElem.mouseY = e.clientY;

            oElem.drag(oElem, x,y);

            return false;
        },

        // private method. Stop drag process.
        _dragEnd : function() {
            var oElem = DragHandler._oElem;

            var x = parseInt(oElem.style.left);
            var y = parseInt(oElem.style.top);

            oElem.dragEnd(oElem, x, y);

            oElem.onmousemove = null;
            oElem.onmouseup = null;
            document.onmousemove=null;
            document.onmouseup=null;
            DragHandler._oElem = null;

        }

    }

    DragHandler.attach(document.getElementById('ObjCountry'));

    </script>

【问题讨论】：

标签： javascript html

【解决方案1】：

我会这样做：

-在draghandler 中创建一个只调用dragend 私有方法的新方法 - 为 id="ObjHdr" 创建一个 mousedown 事件 - 它开始拖动 - 为 id="ObjHdr" 创建一个 mouseup 事件 - 它结束拖动

进入拖动处理程序：分离：函数（oElem）{oElem.onmousedown = DragHandler._dragEnd;返回 oElem； },

document.getElementById("ObjHdr").onmousedown="DragHandler.attach(document.getElementById("ObjCountry"));" document.getElementById("ObjHdr").onmouseup="DragHandler.detach(document.getElementById("ObjCountry"));"

结果：拖放事件仅在您单击标题时开始并在 mouseup 时结束。如果您尝试单击“ObjBody”，则不会执行任何操作 - 不会启动任何拖动过程..

问候奥兹

【讨论】：

【解决方案2】：

这是因为，拖动适用于整个 div，包括滚动条。因为它是在鼠标按下时调用的，所以它也是在单击滚动条时调用的。

【讨论】：