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"; } }
鼠标离开后状态栏没有立刻消失,甚至不消失,再放上后离开才消失重重复复,不知道是不是冒泡的问题但是找了很久没找到,造成这样的原因是什么,应该如何修改?