JS中onmouseover与onmouseout的bug/js避免onmouseover onmouseout多次触发的问题

在Javascript中,父元素包含子元素,当给父元素设置onmouseover或onmouseout事件时,鼠标从父级移入子级的时候会多次触发onmouseover事件;鼠标从子级移入父级后再次移出的时候也会多次触发onmouseout事件。这是个很大的问题。

鼠标移入事件加入判断

window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
            oDiv.onmouseover=function(ev){
                var oEvent=ev||event;
                var oFrom=oEvent.fromElement||oEvent.relatedTarget;
                //其中oEvent.fromElement兼容IE,chrome
                //oEvent.relatedTarget;兼容FF。
                if(this.contains(oFrom)) return; //判断div是不是包含oFrom,如果包含就返回
                do Something...
            };
    };

同样的鼠标移出事件onmouseout时

  window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
            oDiv.onmouseout=function(ev){
                var oEvent=ev||event;
                var oTo=oEvent.toElement||oEvent.relatedTarget;
                //其中oEvent.toElement兼容IE,chrome
                //oEvent.relatedTarget;兼容FF。
                if(this.contains(oTo)) return; //判断div是不是包含oTo,如果包含就返回
                alert('移出了');
            };
    };

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值