為什么要使用監(jiān)聽函數？不可以直接在window.onload下使用mainDiv.onmousedown=function(){}這樣的格式？我用這樣的方法無法拖動，求大神幫助
主要HTML代碼：<body>
<div id=box>
?<img src="images/psb.jpg" alt="師大光影" id="img1"/>
? <img src="images/psb.jpg" alt="師大光影" id="img2"/>
? <div id=main>
? ? ?<div id="left-up" class="minDiv left-up"></div>
? ? ?<div id="upDiv" class="minDiv up"></div>
? ? ?<div id="right-up" ?class="minDiv right-up"></div>
? ? ?<div id="leftDiv" class="minDiv left"></div>
? ? ?<div id= rightDiv class="minDiv right"></div>
? ? ?<div id="left-bottom" class="minDiv left-bottom"></div>
? ? ?<div id="downDiv" class="minDiv bottom"></div>
? ? ?<div id="right-bottom" class="minDiv right-bottom"></div>
? </div>
</div>
<div id="preview"><img src="images/psb.jpg" alt="師大光影" id="img3"/></div>
</body>
//圖框拖動事件，使用以下代碼無法移動
var mouseOffsetX=0;
var mouse0ffsetY=0;
?var moveX=0;
?var moveY=0;
mainDiv.onmousedown=function(){
? ?odrag=true;
}
document.onmousemove=function(e){
?var e=e||window.event;
?var mouseX=e.clientX;
?var mouseY=e.clientY;
?mouseOffsetX=mouseX-mainDiv.offsetLeft;
?mouseOffsetY=mouseY-mainDiv.offsetTop;
?moveX=mouseX-mouseOffsetX;
?moveY=mouseY-mouseOffsetY;
?if(odrag==true){?
? ?mainDiv.style.left= moveX+"px";
? ?mainDiv.style.top= moveY+"px";
? }
}
document.onmouseup=function(){
? odrag=false;
?}
//以下為正確版
mainDiv.addEventListener("mousedown",function(e){
? ? ?var e=e||window.event;
? ? ? mouse0ffsetX=e.clientX-mainDiv.offsetLeft;
? ? ? mouseOffsetY=e.clientY-mainDiv.offsetTop;
? ? ? odrag=true;
? ? })
document.onmousemove=function(e){
? ?
? ?var mouseX=e.clientX;
? ?var mouseY=e.clientY;
? ?var moveX=0;
? ?var moveY=0;;
? ?moveX=mouseX-mouse0ffsetX;
? ?moveY=mouseY-mouseOffsetY;
? ?if(odrag==true){
? ?mainDiv.style.left= moveX+"px";
? ?mainDiv.style.top= moveY+"px";
? ?math.min(Max,math.Max(0,mouseX));
? }
?}
document.onmouseup=function(){
? odrag=false;
?}
}?
2016-11-29
onmousedown中要獲得鼠標相對于浮層左上角的位置吧