如何禁用子元素触发的mouseout事件？

Question

让我详细描述一下这个问题:

我想在悬停在元素上时显示绝对定位的div.使用jQuery非常简单,工作得很好.但是当鼠标移过其中一个子元素时,它会触发包含div的mouseout事件.在悬停子元素时,如何防止javascript触发包含元素的mouseout事件.

使用jQuery做到这一点的最佳和最短的方法是什么？

这是一个简化的例子来说明我的意思:

HTML:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

使用Javascript/jQuery的:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

Answer 1

问题有点老了,但是前几天我遇到了这个问题.

使用最新版本的jQuery执行此操作的最简单方法是使用mouseenter和mouseleave事件而不是mouseover和mouseout.

您可以使用以下命令快速测试行为:

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

Answer 2

为简单起见,我只是重新组织html,将新显示的内容放在mouseover事件绑定的元素中:

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

然后,你可以做这样的事情:

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

注意:我不建议使用内联css,但这样做是为了使示例更容易消化.

Answer 3

是的,伙计们,.mouseleave而不是.mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

甚至可以与live以下组合使用:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

Answer 4

你正在寻找相当于javascript的jQuery防止事件冒泡的jQuery.

看一下这个:

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

基本上你需要在子DOM节点中捕获事件,并且停止它们在DOM树中的传播.另一种方法,虽然真的没有建议(因为它可能会严重破坏页面上的现有事件),但是将事件捕获设置为页面上的特定元素,它将接收所有事件.这对于DnD行为等很有用,但绝对不适合您的情况.