Javascript DIV标记滚动时出错
我已经创建了一个可拖动的div窗口，并创建了一个可滚动的子div（在窗口div中带有）。这些都可以单独工作，但是当我试图通过单击scroll的上下箭头滚动内部div时，拖动事件在滚动完成后触发。我无法解决此问题…请提供任何建议 这是代码Javascript DIV标记滚动时出错,javascript,html,Javascript,Html,我已经创建了一个可拖动的div窗口，并创建了一个可滚动的子div（在窗口div中带有）。这些都可以单独工作，但是当我试图通过单击scroll的上下箭头滚动内部div时，拖动事件在滚动完成后触发。我无法解决此问题…请提供任何建议 这是代码 <!DOCTYPE HTML> <HTML> <HEAD> <TITLE> Reporting</TITLE> <META NAME="Generator" CON
<!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>
报告
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：0.7em；
}
.反对{
宽度：190px；
高度：100px；
边框：1px纯黑；
边界半径：7px 7px 7px 7px；
盒影：3px 3px 2px#d2d2；
位置：绝对位置；
调整大小：
}
ObjHdr先生{
颜色：#fff；
背景#3636；
填充：3px0px 3px7px；
边界半径：6px 6px 0px 0px；；
字体大小：粗体；
光标：移动；
}
.物体{
宽度：190px；
高度：77px；
溢出：滚动；
}
ObjEle先生{
填充：1px 0px 1px 4px；
颜色：#000；
边框底部：1px纯黑；
光标：指针；
}
国家
印度
中国
美国
伊朗
伊拉克
印度尼西亚
var DragHandler={
//私有财产。
_oElem:null，
//公共方法。将拖动处理程序附加到元素。
附件：功能（oElem）{
oElem.onmousedown=DragHandler.\u dragBegin；
//回调
oElem.dragBegin=新函数（）；
oElem.drag=新函数（）；
oElem.dragEnd=新函数（）；
返回oElem；
},
//私有方法。开始拖动过程。
_dragBegin:函数（e）{
var oElem=DragHandler.\u 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，x，y）；
//document.onmousemove=DragHandler.\u拖动；
document.onmouseup=DragHandler.\u dragEnd；
oElem.onmousemove=DragHandler.\u拖动；
oElem.onmouseup=DragHandler.\u dragEnd；
返回false；
},
//私有方法。拖动（移动）元素。
_拖动：函数（e）{
var oElem=DragHandler.\u 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）；
如果（tmpX这是因为，拖动适用于整个div，包括滚动条。因为它是在鼠标向下时调用的，所以在单击滚动条时也会调用它。
-在draghandler中创建一个新方法，该方法只调用DragendPrivate方法
-创建一个mousedown事件到id=“ObjHdr”-它开始拖动
-创建一个mouseup事件，以id=“ObjHdr”-结束拖动
进入德拉甘德勒：
detach:function（oElem）{oElem.onmousedown=DragHandler.\u dragEnd；return oElem；}
document.getElementById（“ObjHdr”）.onmousedown=“DragHandler.attach（document.getElementById（“ObjCountry”）；”
document.getElementById（“ObjHdr”）.onmouseup=“DragHandler.detach（document.getElementById（“ObjCountry”）；”
结果:
拖放事件仅在单击标题时开始，并在鼠标悬停时结束。
如果您尝试单击“ObjBody”，则不执行任何操作-不会启动任何拖动进程
问候
奥兹