Ebeveyn öğesi de bir fareyle mizanpaja sahipse, bir alt öğe için nasıl mouseover olay ateşleme yapabilirim?

Question

Sayfamda bir "yardım" alanım var ve kullanıcı, yardım bilgilerinin güncellenmesi gereken bir masa üzerinde gezinirken. Sorun, tablo içinde her satırın 1 hücresinde bir onay kutusu var ve kullanıcı bu onay kutusunun üzerine geldiğinde, onay kutusunun mouseover olayının tablo olayını geçersiz kılmasını ve onay kutusunun görüntülenmesini istiyorum. Şu anda tablo mouseover iyi çalışıyor ama ben onay kutusu üzerinde fareyle hiçbir şey olmuyor. tablo için mouseover yana

<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

Bu almak için saf JS kullanmak yerine, mouseover süpürdü edilir akım target elemanı kullanarak algılamak için güzel bir yoldur .tagName bir mesajları liste nesne oluşturabilir ve istediğinizi alın.

$('.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]); 

}); 

---

sever misin senin bilgi mesajını silmek istiyorsanız:

$('.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

sadece yerine mouseenter diyoruz, bütün alan içindir. Daha sonra, tablodan çıktıktan sonra yeniden hizalamak için mouseout ekleyebilirsiniz.

Answer 3

Onay kutusu için tabloya kadar yayılmasını durdurmak için fare kapanı olmasını ister misiniz?

Eğer öyleyse, bunu yapmalıdır.

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