使用 jQuery 处理 div 和嵌套元素上的 mouseenter/mouseleave答案

【问题标题】：Handle mouseenter/mouseleave on a div and nested elements with jQuery使用 jQuery 处理 div 和嵌套元素上的 mouseenter/mouseleave
【发布时间】：2011-11-18 22:15:46
【问题描述】：

如果鼠标悬停在 div 或 div 的任何嵌套元素上，我想显示一个工具栏。但是下面的 jQuery 1.7 解决方案只有在鼠标直接悬停在 div 上时才有效，只有在 item css 类中添加 padding 时才有可能。

<head>
  <script type="text/javascript" src="jquery-1.7.min.js"></script>
  <style type="text/css">
    .toolbar { display: none; }
    .item { padding: 1px; } /* doesn't work without padding! */
  </style>
  <title>Demo</title>
</head>

    <body>

  <div class="section">
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
    <div class="item">
      <p class="toolbar">TOOLS</p>
      <p>content</p>
    </div>
  </div>

  <script type="text/javascript">
    $(".section").on(
      "mouseenter",
      ".item",
      function(event) {

        $(event.target).children('.toolbar')
          .show(100);
      }
    )

    $(".section").on(
      "mouseleave",
      ".item",
      function(event) {
        $(event.target).children('.toolbar').hide();
      }
    )      
  </script>

</body>

1px 的内边距不会那么糟糕，但它会导致顶部和底部的内边距更大，并且此解决方法无法正常工作 - 尤其是当鼠标从左侧或右侧进入时。

如何在没有填充技巧的情况下处理 mouseenter 和 mouseleave 事件？

【问题讨论】：

我知道@ManseUK 发布了正确的答案，但我只是想添加一个关于填充技巧的快速说明。这工作（大部分时间）因为添加填充停止了margins collapsing，所以事件可以在.item（event.target 显然是你想要的）以及ps 上触发。跨度>

标签： javascript html jquery jquery-events mouseenter

【解决方案1】：

似乎event.target 不是 div - 更改为 $(this) 可以解决问题 -> http://api.jquery.com/event.target/

http://jsfiddle.net/manseuk/StUvz/

【讨论】：

$('body') 是一个有效的选择器，$(document.body) 可能只是快一点）
$("body") 在我的示例中是一个简化，我将其更改为 .section div 周围的类是什么。
@deamon OK - 我改变的另一件事是$(this) 而不是$(event.target) -> api.jquery.com/event.target
@DidierG。好的-我的错-我同时更改了两件事，并认为是解决了问题的那件事！

【解决方案2】：

This fiddle 我创建的作品很好，没有填充。也许你只需要调整一些小的东西（比如在 CSS 链中继承的宽度）。

如果这不能为您解决问题，请给我们一个重现问题的小提琴，以便我们为您修改它。

【讨论】：

【解决方案3】：

这个没有填充也可以工作http://jsfiddle.net/rkpVW/你可以直接做一个 on(".item") 我认为这是绑定元素的最简单的解决方案。

编辑：http://jsfiddle.net/rkpVW/1/ 使用实时动态内容

【讨论】：

在动态注入 html 时直接使用 $(".item") 将不起作用（在我的情况下会发生什么情况）。
使用实时功能或委托
我用动态插入更新小提琴并使用实时功能jsfiddle.net/rkpVW/1
live() 在 jQuery 1.7 中已弃用。
抱歉，我们没有看到他们弃用了整个事件处理程序，我们已经切换到 1.7，但忘记了我的答案；）

【解决方案4】：

使用$(event.currentTarget) 将解决问题，并且与$(this) 的行为相同，只是更好，因为它会在this 是其他东西的情况下继续工作：

init: function()
{
    $("button").on("mouseenter", this.proxy(function(event)
    {
        this.classMethod();

        console.log( event.currentTarget );
    }) );
}

如你所见，event.currentTarget 是 this:

$("button").on("mouseenter", function(event)
{
    console.log( event.currentTarget === this );
});

【讨论】：