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

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

下面我们首先要熟悉几个对象与方法:

1)事件对象:

2)事件对象相关属性(只针对onmouseover与onmouseout):

  标签源:oEvent.fromElement(从哪里来的元素):兼容IE,Chrome

      oEvent.toElement(去哪里的元素):兼容IE,Chrome

      oEvent.relateTarget(相关元素):兼容FF 

3)判断一个元素是不是包含在另一个元素中的方法:元素.contains(Node)   

了解了上面的方法后,开始解决上面的问题:当onmouseover时,鼠标移过父级元素的时候,不会有任何的问题,当从父级移入子级的时候就会出现问题;同样当onmouseout时,鼠标从父级移出的时候也没有问题,但从子级往父级移动的时候就会多次触发onmouseout事件,我们解决的方法就是设置当从父级移入子级的时候或是从子级往父级移动的时候这个事件无效。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseover的bug</title>
<style>
div{ width:200px; height:200px; background:#ccc; margin:40px auto; }
h3{ height:30px; background:yellow; }
</style>
<script>
    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,如果包含就返回
                alert('移入了');
            };
    };
</script>
</head>

<body>
    <div>
        <h3></h3>
    </div>
</body>

 

同样的鼠标移出事件onmouseout时,可以写成下面这种:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>onmouseout的bug</title>
<style>
div{ width:200px; height:200px; background:#ccc; margin:40px auto; }
h3{ height:30px; background:yellow; }
</style>
<script>
    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('移出了');
            };
    };
</script>
</head>

<body>
    <div>
        <h3></h3>
    </div>
</body>

其实我们还可以使用onmouseenter与onmouseleave事件来代替onmouseover与onmouseout事件,网上查了一下说onmouseenter与onmouseleave事件不稳定,而且有的时候只兼容IE内核的浏览器,我现在试了一个兼容性很是很好的,可以尝试使用噢!

 

 

 js避免onmouseover onmouseout多次触发


 //------------------------------------------------------------
function contains(parentNode, childNode) 
{
    if (parentNode.contains) {
        return parentNode != childNode && parentNode.contains(childNode);
    } else {
        return !!(parentNode.compareDocumentPosition(childNode) & 16);
    }
}
function checkHover(e,target)
{
    if (getEvent(e).type=="mouseover")  {
        return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
    } else {
        return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
    }
}
function getEvent(e){
    return e||window.event;

}

//把以上代码copy,然后在οnmοuseοver="abc(event,this)"

function abc(e, obj)

{

  if(checkHover(e,obj)){

//..这里写你要做的事情即可。
        }

}

 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值