鼠标光标转到子div时触发的onMouseOut效果....我不想这样做

时间:2013-05-08 09:10:44

标签: onmouseout

这是我的代码 -

<li>
<a  id="LoginTxt2" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);" href="#">
<div style="background-color:#CCC;">OLD Text</div>
</a>
</li>

JS -

MouseOver = function(obj){
    var id = obj.id;
    document.getElementById(id).innerHTML='<div style="background-color:#DDD;">NEW Text</div>';

 }
MouseOut  = function(obj){
    var id = obj.id;
    document.getElementById(id).innerHTML="<div style="background-color:#CCC;">OLD Text</div>";

 }

当我的鼠标转到子div时,MouseOut很凶,我不想这样做... plz help

1 个答案:

答案 0 :(得分:0)

这是事件的工作方式,无法避免调用MouseOut()函数。你可以做的是在MouseOut()函数中检查你现在悬停的元素是否是外元素的子元素:

MouseOut = function(obj, event) {
    // this is the original element the event handler was assigned to
    var e = event.toElement || event.relatedTarget;

    // check for all children levels (checking from bottom up)
    while (e && e.parentNode && e.parentNode != window) {
        if (e.parentNode == this||  e == this) {
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
        e = e.parentNode;
    }
    var id = obj.id;
    document.getElementById(id).innerHTML="<div style="background-color:#CCC;">OLD Text</div>";
}

请注意,您需要将onmouseout声明更改为onmouseout="MouseOut(this,event);"

注意:解决方案来自https://stackoverflow.com/a/13141057/1417546