让所有子元素触发 jQuery mouseout 事件答案

【问题标题】：Getting jQuery mouseout event to fire from all child elements让所有子元素触发 jQuery mouseout 事件
【发布时间】：2010-10-30 06:43:19
【问题描述】：

我在 Div 中有一个包含 8 个图像的表格，我想为表格或 div 触发 mouseout 事件，但它不会触发。我猜这是因为鼠标实际上离开了每个图像，或者 td，或者 tr 等......有没有办法让整个表的 mouseout 事件传播起来，以便它甚至被触发从子元素？标记很简单：

<div id=container>
  <table id="tbl">
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
    <tr>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
      <td><img src=""></td>
    </tr>
  </table>
</div>

我的 jQuery 代码是：

$("#tbl").mouseout(function(){
  alert("out home");
});

我无法为图像触发单独的 mouseout 事件，因为有时它们上方绝对放置了元素，这会导致 mouseout 事件过早触发。

【问题讨论】：

标签： jquery events mouseout propagation

【解决方案1】：

使用mouseleave 事件，它具有完全相同的功能，但不会与子元素一起触发。

$("#tbl").bind("mouseleave",function(){
  alert("out home");
});

【讨论】：

【解决方案2】：

应该是：

$("#tbl").mouseout(function(){
  alert("out home");
});

您错过了“#”。如果您只想要图像，请尝试：

$("#tbl >img").mouseout(function(){
  alert("out home");
});

PS。您是否考虑过改用 $("...").hover()？

【讨论】：

嘿，对不起..我不喜欢那个！我从我的实际代码中删除了太多，我在我的实际 js 文件中有'#'......还有什么？
绝对放置的元素与表格重叠好吗？
我重新阅读了您的帖子并意识到我并不完全理解，您的代码是完全不工作还是部分工作，您想要获得什么效果？
表格完全被 8 张图片填满。绝对放置的 div 可以部分覆盖任何图像，所以，是的，它也与表格重叠。我想为图像设置鼠标悬停，但是当我将鼠标悬停在绝对放置的 div 上时，img.mouseout 会触发..这是我不想要的。我想了一个办法，这将是一个鼠标悬停在桌子上，但它根本没有开火。抱歉，如果这令人困惑！
所以对于表你必须确保你完全不在表中。你检查了吗（尝试渲染边框）？

【解决方案3】：

您不应该使用#tbl 来选择表格吗？

$("#tbl").mouseout(function(){
  alert("out home");
});

【讨论】：