js 鼠标移入触发事件。多次触发。

Posted 2023-03-30

鼠标移入li 里面触发需触发一个事件，但是当鼠标移动到li里面的div上时也会触发这个事件，等于重复的在触发
document.getElementById("fbox1").onmouseover=function()alert(123);

<li id="fbox1">
<div>
<div>
<img /><a href="#"></a></div>
<div >
<a href="#"></a></div>
</div>
</li>

参考技术A 这是肯定会触发的，div包含在li里边，只要你鼠标划入li必定触发事件，并不是重复触发。

mouseover和mouseout都是冒泡事件。mouseenter是ie独有的。我从网上扒了段代码

function isMouseLeaveOrEnter(e, handler)
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
参考技术B 这个当然了
因为li是父节点
包在最外层
当你鼠标要移动到里面内容是
一定要经过li
所以会触发事件

Jquery mouseover多次触发问题

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

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

}