委托闪烁循环答案

【问题标题】：delegate flickering loop委托闪烁循环
【发布时间】：2012-09-11 22:53:39
【问题描述】：

我一直在使用委托来获得在嵌套 div 上工作的悬停效果。但它似乎导致了一个闪烁的循环，我不知道如何停止它。

.shadow div 是其父 div .box 的高度和宽度。

   <div class="wrapper">
       <div class="box">
          <div class="hover"><h2>Joe Bloggs</h2></div>
          <div class="cover"></div>
          <div class="shadow"></div>
          <img class="image" src="_assets/images/joebloggs.jpg" alt="" />
       </div>
    </div>

    $(".wrapper").delegate(".shadow", "mouseover mouseout", function(e) {
       if (e.type == 'mouseover') {
          $(this).parent().find('.cover').show();
          $(this).parent().find('.hover').show();
       } else {
          $(this).parent().find('.cover').hide();
          $(this).parent().find('.hover').hide();
       }
    });

【问题讨论】：

当您显示cover 和hover 时，它会变为光标下方，触发鼠标移出，隐藏cover 和hover 导致鼠标再次悬停在无限循环中。如果您不使用 mouseenter/mouseleave 并将 cover 和 hover 设置为 shadow 的子级，则不会出现此问题。
@Kevin B 啊当然，我真笨！我现在觉得很傻，谢谢你指出这一点。
@Kevin B 由于您的评论已修复，非常感谢！

标签： jquery delegates hover infinite-loop flicker

【解决方案1】：

重新编码到新的 jQuery 方法（.on / mouseenter，.delegate 现在已过时），看看这是否有预期的效果：

$(".wrapper").on("mouseenter", ".shadow", function(e) {
   $(this).parent().find('.cover').show();
   $(this).parent().find('.hover').show();
}).on("mouseleave", ".shadow", function(e) {
   $(this).parent().find('.cover').hide();
   $(this).parent().find('.hover').hide();
});

【讨论】：

【解决方案2】：

将鼠标悬停在目标元素上时，您的事件会无限循环触发。

鼠标输入.shadow
显示.cover 和.hover
由于显示.hover，鼠标离开.shadow
.cover 和 .hover 已隐藏
（转到 1。除非鼠标不再位于这三个中的任何一个上）

如果您改为使用 mouseenter/mouseleave 并将 cover 和 hover 设为 shadow 的子级，则不会出现此问题。

【讨论】：