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

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

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

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

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

HTML:

Hover Me

  Test
  
    Option 1
    Option 2
  

使用Javascript/jQuery的:

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

小智.. 205

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

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

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

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

帮助我的非jquery javascript相关问题.我正在使用mouseenter/mouseout而不是mouseleave与我的事件监听器! (3认同)

救了我一些头疼的事.奇怪的是如何在子元素上盘旋会触发父元素的'mouseout`事件,而事实上它仍然在父元素内部. (2认同)

---

Ryan McGeary.. 18

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

  Hover Me
  

    Test
    
      Option 1
      Option 2
    
  

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

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

---

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

1> 小智..：

---

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

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

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

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

---

帮助我的非jquery javascript相关问题.我正在使用mouseenter/mouseout而不是mouseleave与我的事件监听器!

---

救了我一些头疼的事.奇怪的是如何在子元素上盘旋会触发父元素的'mouseout`事件,而事实上它仍然在父元素内部.

2> Ryan McGeary..：

---

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

  Hover Me
  

    Test
    
      Option 1
      Option 2
    
  

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

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

---

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

3> Lord Nighton..：

---

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

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

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

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

4> Yuval Adam..：

---

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

看一下这个:

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

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