强制 jQuery 的 mouseover 不在子元素上触发，仅在父元素上触发

Question

我有一个包含 <img> 的 <a>，当鼠标悬停在 <a> 上时希望触发某些事件。问题是，如果我将光标移到内部的图像上，它会再次触发。

有没有办法强制只在悬停在父元素 <a> 上时触发，而不是子元素（子元素比父元素小）。

我的js代码：

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
    });

- Olivera Kovacevic

---

如果您对为什么要这样做感兴趣，可以在QuirksMode上找到更多信息：http://www.quirksmode.org/js/events_order.html - Jervelund

Answer 1

问题在于 mouseover 事件会冒泡到祖先元素，因此您可以使用不会冒泡的 mouseenter 事件。

尝试使用 mouseenter 事件。

$('#logo a').mouseenter(function() {
    $(this).addClass('active');
    $('div#header-contact').fadeIn();
});

- Arun P Johny

---

我从未意识到我的偶数是错误的，谢谢。 - Vitaliy Terziev

Answer 2

您需要停止事件向子元素传播/冒泡。 event.stoppropagation

$('#logo a').mouseover(function(event) {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
        event.stopPropagation()
    });

或者您可以使用鼠标进入事件。

$('#logo a').mouseenter(function() {
    $(this).addClass('active');
    $('div#header-contact').fadeIn();
});

- Vinay Pratap Singh Bhadauria

Answer 3

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
});


$('#logo a img').mouseover(function(event) {
    event.preventDefault();
});

- CRABOLO

Answer 4

停止子元素的鼠标悬停事件：

$('#logo a').mouseover(function() {
        $(this).addClass('active');
        $('div#header-contact').fadeIn();
    }).children().mouseover(function() {
  return false;
});

- Bhojendra Rauniyar