亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

DOM事件探秘4-3 把最后點擊其他地方收回狀態欄改成離開狀態欄自動消失出現bug

window.onload?=?Panel;

function?Panel()?{
????var?oTitle?=?getByClass('login_logo_webqq',?'loginPanel')[0];
????//拖拽
????oTitle.onmousedown?=?movePanel;
????//關閉
????var?oClose?=?document.getElementById('ui_boxyClose');
????oClose.onclick?=?function?()?{
????????document.getElementById('loginPanel').style.display?=?'none';
????}
????//切換狀態
????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';
????}
????//鼠標滑過
????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';
????????}
????????//????點擊事件
????????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";
????}
}

鼠標離開后狀態欄沒有立刻消失,甚至不消失,再放上后離開才消失重重復復,不知道是不是冒泡的問題但是找了很久沒找到,造成這樣的原因是什么,應該如何修改?

正在回答

3 回答

這個是由于onmouseover引起的,主要是因為ul里面包含了子元素,會造出鼠標移動到子元素,比如li上面也會觸發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';
?? }
? }

0 回復 有任何疑惑可以回復我~
#1

JohnnyHTML 提問者

我都差點忘了這個問題了,不過依然感謝
2016-09-06 回復 有任何疑惑可以回復我~
#2

JohnnyHTML 提問者

這個問題其實已經搞懂了,另外onmouseleave和onmouseenter已經被ie外的瀏覽器支持了
2016-09-06 回復 有任何疑惑可以回復我~

我感覺是事件冒泡的問題。有點無力

0 回復 有任何疑惑可以回復我~
#1

JohnnyHTML 提問者

我也覺得是但是找不到,父級沒有同類事件
2016-08-06 回復 有任何疑惑可以回復我~

我也想問

1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
DOM事件探秘
  • 參與學習       99534    人
  • 解答問題       1305    個

DOM事件?本課程會通過實例來給小伙伴們講解如何使用這些事件

進入課程

DOM事件探秘4-3 把最后點擊其他地方收回狀態欄改成離開狀態欄自動消失出現bug

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號