Jquery mouseover多次触发问题

Posted 2020-09-17

引用自 http://lishuaishuai.iteye.com/blog/2338341

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

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

1）事件对象：

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

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

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

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

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

解决方法

1.mouseenter与mouseleave事件来代替onmouseover与onmouseout事件。

　　这个原文提到兼容问题，但我在Jquery中查到有mouseenter与mouseleave事件。所以我就用了Jquery的mouseenter来代替，亲测IE8，FF，Chrome都用。

2.//------------------------------------------------------------
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,然后在onmouseover="abc(event,this)"

function abc(e, obj)

{

  if(checkHover(e,obj)){

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

}