防止“冒泡”？

Question

我不确定这是否真的在冒泡，我会解释的。

我有这个：

<div>
  <div>
    text here
  </div>
</div>

如何绑定一个单击事件，使其只影响所包含的div？如果我这样设置它：

jQuery('div').bind('click', function() {
  jQuery(this).css('background','blue');
});

所有的div都是蓝色的。如果我将false作为第三个参数(防止冒泡)添加到绑定函数中，它什么也不做。

我该如何解决这个问题呢？

Answer 1

http://api.jquery.com/event.stopPropagation/

在处理程序中添加event.stopPropagation();。

(不过，给嵌套的DIV分配一个ID或类可能会更好，这样您就可以确保它是唯一受影响的。)

Answer 2

http://jsfiddle.net/vol7ron/WzSkj/

以最后一个后代为目标

归功于Patrick DW

jQuery('div:not(:has(div))').bind('click', function() {
   jQuery(this).css('background','blue');
});

这应该就是您需要的全部内容，因为它将查看所有div，并找到那些没有子div的元素(因此，它们将是该元素类型的最后一个后代。如果您想排除那些独立的div，您可以进一步过滤它，以确保它们的父目录是div。

更老的答案：

这并不意味着一个完整的/健壮的插件。它只是一个如何针对链中的最后一个元素的示例。查看修订历史，了解如何在不使用插件的情况下完成此操作。如果您希望将其用于生产，则应对其进行修改。

插件：

(function($){
   $.fn.lastDescendant = function(el){
      var found = jQuery(el + ':first').siblings(el).andSelf();
      var prev, curr;
      var stack = this;
      for (var i=0,n=found.length; i<n; i++){
         curr = found.eq(i).find(el);
         while (curr.length){
            prev = curr;
            curr = curr.find(el);
         }         
         stack = stack.add(prev);
      }
      return stack;
   };
})( jQuery );

示例调用：

jQuery.fn.lastDescendant('div')
      .click(function(){
         jQuery(this).css("background","#09c");
      });

备注：

• 这不会选择第一个(祖先)元素。
• 如果我想让它成为一个生产插件，我将包括检查参数，并允许您传入一个对象和一个起点(这样就不会选择同级)

Answer 3

要解决这个问题，只需使用更具体的选择器

jQuery('div > div').bind('click', function() {
  jQuery(this).css('background','blue');
})