jQuery选择器，不包含子项

Question

我还没有看到这个问题，所以这里有：

想象一下，我有这个html结构：

<div class="button">
    <div class="text">
        Button
    </div>
</div>

我想选择“.button”元素，而不是“.btext”元素。意思是，我想做一些像

这样的事情

$(".button")不包含“.btext”。我想将它用于.hover（）匹配，但我不希望将鼠标悬停在文本上以触发事件。

有没有办法做到这一点，或者用html是不可能的？

Answer 1

当悬停事件触发时，它将返回元素，因此您可以在回调中找到它

$('button').hover(function(e){
  if (e.target == $('.text')){
         return false;
     }
});

修改

@Alnitak是正确的，应该是。

   if ($(e.target).hasClass('text'))

Answer 2

您应该检查事件目标元素。检查e.target后，只需执行必要的操作即可。例如，它看起来像这样：

$('.button').mouseover(function(e) {
    $(this).toggleClass('hover', !$(e.target).hasClass('text'));
});

演示：http://jsfiddle.net/dfsq/8LKZV/

Answer 3

如果你不想让一个事件从一个孩子传染给一个父母而你正在使用jQuery，你可以像这样对孩子使用event.stopPropagation：

$(".text").hover(function(e){
    e.stopPropagation();
});

link to docs

fiddle