onMouseOut эффект срабатывает, когда курсор мыши выходит на ребенка DIV .... Я не хочу, чтобы сделать это

Question

Вот мой код -

<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 fierd, я не хочу этого делать ... plz help

Answer 1

Так работает мероприятие, и нет способа избежать вызова функции 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