当鼠标在指定元素中移动时停止 mouseout 事件答案

【问题标题】：Stop mouseout events when mouse move in specified element当鼠标在指定元素中移动时停止 mouseout 事件
【发布时间】：2013-03-26 01:53:56
【问题描述】：

所有，我知道mouseover 和mouseout 事件，这些事件在鼠标移入和移出元素及其后代时触发。让我举个例子，假设你有一个如下的dom结构：

<div id="top">
   <div class="container">
      <!--<div class="head">
      </div>-->
      <div class="content">
         <!--maybe there are many nested `div.contiainer` as children directly or not directly.-->
      <div>
   </div>
</div>

假设鼠标在div.container 中移动，我们在其中添加div.head。当鼠标移出时，我们会删除鼠标进入时创建的div.head。

所以代码如下所示。

    $("div.container").on("mouseover",function(){//append div.head})
.on("mouseout",function(){//remove the div.head});

所以我的问题是我想知道当鼠标移入div.head 时是否有可能停止事件mouseout？

【问题讨论】：

标签： jquery

【解决方案1】：

.mouseout 将在您离开其绑定的元素时触发 - 即使它是子元素。你最好使用.mouseleave，它只会在你离开元素时触发（而不是悬停在孩子身上）http://api.jquery.com/mouseleave/

小提琴：http://jsfiddle.net/zN4FF/

【讨论】：

嗨，朋友，如果 dom 包含嵌套的div.container，我相信代码会非常冗长。谢谢。