JohnnyHTML
2016-08-05 18:05
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";
}
}鼠标离开后状态栏没有立刻消失,甚至不消失,再放上后离开才消失重重复复,不知道是不是冒泡的问题但是找了很久没找到,造成这样的原因是什么,应该如何修改?
这个是由于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';
}
}
我感觉是事件冒泡的问题。有点无力
我也想问
DOM事件探秘
99528 学习 · 1305 问题
相似问题