親要素にマウスオーバーがある場合でも、子要素に対してmouseoverイベントを発生させるにはどうすればよいですか？

Question

私は自分のページに「ヘルプ」領域を持っており、ユーザーがテーブルの上を移動するとヘルプ情報が更新されるはずです。問題はテーブル内にあります。各行の1つのセルにチェックボックスがあり、そのチェックボックスをユーザーがホバーすると、チェックボックスのmouseoverイベントでテーブルイベントをオーバーライドし、チェックボックスのヘルプを表示します。現在、テーブルのマウスオーバーは正常に機能しますが、チェックボックスにマウスを重ねると何も起こりません。 mouseover以来

<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

これは、取得するために、純粋なJSを使用するよりも、mouseover推移している現在のtargetの要素を使用して検出するための良い方法です.tagNameあなたはメッセージリストオブジェクトを作成することができます所望のものを取り出すことができる。

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

}); 

---

あなたが好きあなたの情報メッセージをクリアしたい場合：

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

テーブルのためだけではなく、mouseenterを呼び出して、全領域のためです。次に、mouseoutを追加して、テーブルから退出した後に再更新することができます。

Answer 3

テーブルまでのチェックボックスの伝播をマウスオーバーしたいと思うような音がしますか？

もしそうなら、これが必要です。

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