为了账号安全,请及时绑定邮箱和手机立即绑定

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事件探秘
  • 参与学习       99530    人
  • 解答问题       1305    个

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

进入课程

DOM事件探秘4-3 把最后点击其他地方收回状态栏改成离开状态栏自动消失出现bug

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号