5

ページに「ヘルプ」エリアがあり、ユーザーがテーブルの上にカーソルを合わせると、ヘルプ情報が更新されます。問題はテーブル内にあり、各行の1つのセルにチェックボックスがあり、ユーザーがそのチェックボックスにカーソルを合わせると、チェックボックスのマウスオーバーイベントがテーブルイベントをオーバーライドし、チェックボックスのヘルプが表示されるようにします。現在、テーブルのマウスオーバーは正常に機能しますが、マウスをチェックボックスに重ねても何も起こりません。

<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");
});
4

3 に答える 3

4

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();

});
于 2013-03-07T00:02:12.413 に答える
3

チェックボックスのマウスオーバーでテーブルへの伝播を停止したいように聞こえますか？

もしそうなら、これはそれを行う必要があります。

$('.myCheckbox').mouseover(function(e) {
    $('.myHelpMenu').html("this is my checkbox help");
    e.stopPropagation();
});
于 2013-03-06T23:56:53.723 に答える
1

mouseoverテーブルの はエリア全体を対象としているため、代わりに呼び出すだけですmouseenter。mouseoutその後、テーブルを離れた後に再更新するために を追加できます。

于 2013-03-06T23:55:02.230 に答える