在Dom事件中QQ拖拽源代碼問(wèn)題
在Dom事件中QQ拖拽源代碼問(wèn)題：
請(qǐng)問(wèn)各位大神：onmouseup放在onmousedown中和放在onmousedown外有什么區(qū)別么？ 我先放在onmousedown中，按下幾次釋放后都沒(méi)有什么問(wèn)題，可是如果onmouseup放在onmousedown外面，當(dāng)?shù)诙伟聪聲r(shí)松開(kāi)鼠標(biāo)窗口還是跟著鼠標(biāo)走，此時(shí)貌似onmouseup沒(méi)有效用？想問(wèn)下這種情況是為什么,謝謝！
2017-10-10
function getByClass(clsName,parent){
? var oParent=parent?document.getElementById(parent):document,
????? eles=[],
????? elements=oParent.getElementsByTagName('*');
? for(var i=0,l=elements.length;i<l;i++){
??? if(elements[i].className==clsName){
????? eles.push(elements[i]);
??? }
? }
? return eles;
}
//這里定義了getByClass()
var oTitle=getByClass('login_logo_webqq','loginPanel')[0];
?? //這里調(diào)用了上面的getByClass(），目的是為了獲取指定父族元素下指定類名的元素
?? oTitle.onmousedown=fnDown;
//這里是給上面獲取的元素添加鼠標(biāo)點(diǎn)擊事件fnDown
function fnDown(event){
? event = event || window.event;
? var oDrag=document.getElementById('loginPanel'),
????? // 光標(biāo)按下時(shí)光標(biāo)和面板之間的距離
????? disX=event.clientX-oDrag.offsetLeft,
????? disY=event.clientY-oDrag.offsetTop;
? // 移動(dòng)
? document.onmousemove=function(event){
? ?? ?event = event || window.event;
? ?? ?fnMove(event,disX,disY);
? }
? // 釋放鼠標(biāo)
? document.onmouseup=function(){
? ?? ?document.onmousemove=null;
? ?? ?document.onmouseup=null;
//最后你的問(wèn)題，你說(shuō)為什么不能把這句放在外面fnDown函數(shù)外面嗎？
//因?yàn)檫@是預(yù)先注冊(cè)了鼠標(biāo)點(diǎn)擊事件，而.onmouseup是觸發(fā)了鼠標(biāo)點(diǎn)擊事件調(diào)用了fnDown函數(shù)現(xiàn)場(chǎng)現(xiàn)注冊(cè)的。
//而如果你把? ? document.onmouseup=function(){...}放在外面的話 document就不是oTitle了，所以oTitle就沒(méi)//有鼠標(biāo)釋放事件了，所以就你的鼠標(biāo)一直沒(méi)松開(kāi)，所以你的鼠標(biāo)一直在點(diǎn)擊，所以你的鼠標(biāo)移動(dòng)就一直在拖動(dòng)div，所以你懂了嗎？
? ???
}
2017-11-20
不要過(guò)于強(qiáng)迫癥了哈，
2017-10-10
謝謝您的回答！我稍微理解了您的意思。
但是當(dāng)我把fnDown函數(shù)中的onmouseup事件去除，之后在oTitle.onmousedown=fnDown;后面加上
? ? ?oTitle.onmousedown=fnDown;
? ? //alert(document);
? ? oTitle.onmouseup=function(){
? ? ? ? //alert(document);
? ? ? ? // alert(oTitle);
? ? ? ? // this.onmousedown=null;
? ? ? ? this.onmousemove=null;
? ? ? ? this.onmouseup=null;
之后拖拽功能還是不能實(shí)現(xiàn)，您說(shuō)“document就不是oTitle”，可是現(xiàn)在我是在oTitle上面+的onmouseup事件，拖拽功能還是實(shí)現(xiàn)不了，不明白。（我就是想著onmousedown和onmouseup是一對(duì)，看著onmouseup在onmousedown里面怪難受，看看能不能將onmouseup放在外面）