Jquery mouseover多次觸發問題

標籤：node   引用   親測   eve   parent   asc   對象   over   doc   

引用自 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)){

//..這裡寫你要做的事情即可。
        }

}

 

Jquery mouseover多次觸發問題