DOM事件探秘4-3 把最后點(diǎn)擊其他地方收回狀態(tài)欄改成離開狀態(tài)欄自動消失出現(xiàn)bug
window.onload?=?Panel; function?Panel()?{ ????var?oTitle?=?getByClass('login_logo_webqq',?'loginPanel')[0]; ????//拖拽 ????oTitle.onmousedown?=?movePanel; ????//關(guān)閉 ????var?oClose?=?document.getElementById('ui_boxyClose'); ????oClose.onclick?=?function?()?{ ????????document.getElementById('loginPanel').style.display?=?'none'; ????} ????//切換狀態(tài) ????var?loginState?=?document.getElementById('loginState'), ????????stateList?=?document.getElementById('loginStatePanel'), ????????lis?=?stateList.getElementsByTagName('li'), ????????stateTxt?=?document.getElementById('login2qq_state_txt'), ????????stateShow?=?document.getElementById('loginStateShow'); ????loginState.onclick?=?function?(e)?{ ????????stateList.style.display?=?'block'; ????} ????//鼠標(biāo)滑過 ????for?(var?i?=?0;?i?<?lis.length;?i++)?{ ????????lis[i].onmouseover?=?function?()?{ ????????????this.style.backgroundColor?=?'#567'; ????????} ????????lis[i].onmouseout?=?function?(e)?{ ????????e?=?event?||?window.event; ????????if?(e.stopPropagation)?{ ????????????e.stopPropagation(); ????????}?else?{ ????????????e.cancelBubble?=?true; ????????} ????????????this.style.backgroundColor?=?'#fff'; ????????} ????????//????點(diǎn)擊事件 ????????lis[i].onclick?=?function?(e)?{ ????????????e?=?event?||?window.event; ????????????if?(e.stopPropagation)?{ ????????????????e.stopPropagation(); ????????????}?else?{ ????????????????e.cancelBubble?=?true; ????????????} ????????????var?id?=?this.id; ????????????stateList.style.display?=?'none'; ????????????stateShow.className?=?'login-state-show?'?+?id; ????????????stateTxt.innerHTML?=?getByClass('stateSelect_text',?id)[0].innerHTML; ????????} ????} ????stateList.onmouseout?=?function?()?{ ????????this.style.display?=?"none"; ????} }
鼠標(biāo)離開后狀態(tài)欄沒有立刻消失,甚至不消失,再放上后離開才消失重重復(fù)復(fù),不知道是不是冒泡的問題但是找了很久沒找到,造成這樣的原因是什么,應(yīng)該如何修改?
2016-09-05
這個是由于onmouseover引起的,主要是因為ul里面包含了子元素,會造出鼠標(biāo)移動到子元素,比如li上面也會觸發(fā)ul的onmouseover事件,造成了混亂。解決辦法:
1,如果是IE瀏覽器,用onmouseleave代替。
2,不管什么瀏覽器,下面這個方法都是牛逼的,不信,你試試。
?? stateList.onmouseout = function(e){?
??? if( !e ) e = window.event;?
??? var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;?
??? while( reltg && reltg != this ) reltg = reltg.parentNode;?
??? if( reltg != this ){?
??????? // 這里可以編寫 onmouseleave 事件的處理代碼?
????? stateList.style.display='none';
?? }
? }
2016-08-06
我感覺是事件冒泡的問題。有點(diǎn)無力
2016-08-05
我也想問