Question

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

我有这个：

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

如何绑定一个on click事件，以便它只影响所包含的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

您应该使用ID或类等标识符，但对于您的示例，您可以执行此操作：

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

...它会将处理程序绑定到另一个div的直接后代div。

因此，要么初始选择特定于您想要影响的元素，要么使用事件委托，在祖先上放置处理程序，并测试您想要的元素。

委托示例： http://jsbin.com/ehemac/edit#javascript,live

<div id="container">
    <div class="outer">
      <div>
        text here
      </div>
    </div>
    <div class="outer">
      <div>
        text here
      </div>
    </div>
</div>

jQuery('#container').delegate( '.outer > div', 'click', function() {
    jQuery(this).css('background','blue');
});

这使用delegate()^[docs]方法将处理程序置于具有ID #container的祖先。

.delegate()的第一个参数是选择器。在#container内单击的任何元素都会将该选择器与单击的元素进行比较。如果选择器匹配，则将调用处理程序。

Answer 3

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");
      });

<强> 注意：的

这不会选择第一个（祖先）元素。如果您也想选择它，可以将整个事物包装在新的div中，然后执行上述操作。
如果我要将它作为一个生产插件，我将包括检查参数，并允许您传入一个对象和一个起点（以便不选择兄弟姐妹）

Answer 4

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

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

Answer 5

解决问题的最佳方法是为内部div提供一个可识别的功能，例如类<div class="inner"></div>。

或者，更改您的选择器：

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

Answer 6

尝试给内部div一个id标签并引用它......

<div><div id=foo>text goes here</div></div>


...

$('#foo').bind('click', function() {
  $(this).css('background','blue');
});

HTH - 乔

防止“冒泡”？

6 个答案:

针对最后一个后代

归功于Patrick DW：

旧答案：

插件：

示例呼叫：