javascript - 阻止 jquery live 钩住所有的 child

Question

当鼠标悬停在 item 的子项上时，我无法阻止愚蠢的事情触发事件。我只想通过 div.item 元素触发事件，而不是通过 div.itemChild 触发。这让我发疯，请帮忙。

event.stopPropigation 不起作用。 if(!$(event.source).is('itemChild')) 也不会，由于某种原因 is() 总是返回 false。

HTML

<div id="items">
    <div class="item">
        <div class="itemChild">
        </div>
        <div class="itemChild">
        </div>
    </div>
</div>

JS

//on hover event for each post
$('div.item', '#items').live('mouseover mouseout', function(event){
    if (event.type == 'mouseover'){
        //fire mouseover handler
    }
    else{
        //fire mouseout handler
    }
});

有没有办法在悬停 div.item 的子项时停止实时触发？

顺便说一句，div.item 的子元素完全覆盖了它。

基本上我希望它的行为像 .hover() 但绑定(bind)到通过 ajax 加载的东西。

Answer 1

它对 child 没有约束力。它正在冒泡到父级。

此外，您的语法不正确。这:

$("div.item", "div.items")...

意思是“为我找到所有具有 item 类的 div，这些 div 是具有 item 类的 div 的后代。但是您没有这样的 div(具有 class items)。您有一个具有 items ID 的 div。

结合所有这些尝试:

$("#items div").live("mouseover mouseout", function(event) {
  if ($(event.source).hasClass("itemChild")) {
    return false;
  } else if (event.type == "mouseover") {
    ...
  } else {
    ...
  }
});

或者，另一种选择:

$("#items > div.item").live("mouseover mouseout", function(event) {
  if (!($this).is("div.item")) {
    return false;
  }
  ...
});

基本上，有很多方法可以给这只猫剥皮，但就像我在第一句话中所说的那样，您必须了解事件会冒泡，直到处理程序停止传播，或者直接(通过调用 event.stopPropagation() 或从事件处理程序返回 false，这相当于 event.stopPropagation(); event.preventDefault();)。

此外，如果您正在执行 mouseenter 和 mouseout 操作，您也可以使用执行这两项操作的 hover() 事件:

$("#items > div.item").live("hover", function(event) {
  // mouseenter
}, function(event) {
  // mouseout
});