W jaki sposób można wywołać zdarzenie mouseover dla elementu podrzędnego, jeśli element nadrzędny ma również najechanie kursorem myszy?

Question

Mam "pomoc" obszaru na mojej stronie i kiedy użytkownik unosi się nad tabelą, informacje o pomocy powinny zostać zaktualizowane. Problem leży w tabeli Mam pole wyboru w 1 komórce każdego wiersza, a kiedy użytkownik unosi się nad tym polem wyboru, chcę, aby zdarzenie mouseover w polu wyboru przesłaniało zdarzenie table i aby wyświetlać pomoc. Obecnie najechanie kursorem na tabelę działa dobrze, ale nic się nie dzieje, gdy wskaźnik myszy znajduje się nad polem wyboru.

<table class="myTable"> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

<div class="myHelpMenu"></div> 


$('.myCheckbox').mouseover(function() { 
    $('.myHelpMenu').html("this is my checkbox help"); 
}); 

$('.myTable').mouseover(function() { 
    $('.myHelpMenu').html("this is my tables help"); 
}); 

Answer 1

LIVE DEMO

Jest to dobry sposób, aby wykryć za pomocą mouseover aktualny target elementu, który unosił, niż przy użyciu czystego JS aby pobrać .tagName można utworzyć wiadomości lista obiektu i pobrać żądany.

$('.myTable').mouseover(function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

}); 

---

Jeśli chcesz usunąć wiadomość informacji lubię:

$('.myTable').on('mouseover mouseleave',function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

    if(e.type=='mouseleave') 
    $('.myHelpMenu').empty(); 

}); 

Answer 2

Od mouseover na stole jest dla całego obszaru, po prostu zadzwoń mouseenter zamiast. Następnie możesz dodać mouseout, aby ponownie się zaktualizować po opuszczeniu stołu.

Answer 3

Wygląda na to, że chcesz najechać kursorem myszy na pole wyboru, aby zatrzymać propagację do stołu?

Jeśli tak, to powinno to zrobić.

$('.myCheckbox').mouseover(function(e) { 
    $('.myHelpMenu').html("this is my checkbox help"); 
    e.stopPropagation(); 
});