如果父元素也有鼠标悬停,如何为子元素触发mouseover事件？

Question

我的页面上有一个"帮助"区域,只要用户将鼠标悬停在表格上,就应该更新帮助信息.问题是我在每行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");
});

Answer 1

LIVE DEMO

mouseover这是一种使用悬停的当前元素进行检测的好方法target，而不是使用纯 JS 来检索.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();

});