调用子函数时阻止父 jquery 函数

Question

我遇到了与父/子 jquery 函数冲突的问题。子函数是引导函数，父函数是自定义函数。这个想法是父 div（参见下面的代码）可能包含太多数据，因此应该限制高度。当您单击 div 时有一个切换开关，可以展开它，但是当我单击子元素时不应该发生这种情况，因为这个也会折叠下来。

<div id="items" class="semiCollapsed">
  <span data-toggle="collapse" data-target="#x" > an item</span>
  <div id="x" class="collapse">description of item</div>
  ... more items ...
</div>

我的父 JQuery 的功能是：

jQuery(document).ready(function() {
  jQuery('#items').click(function(event) {
    event.preventDefault();
    $("#items").toggleClass("semiCollapsed");
  })
});

和css：

.semiCollapsed {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height:110px;
}

引导折叠：

http://pastebin.com/Xfnq7R4i

我遇到的问题是，当我调用子函数时，父函数会被调用。如何解决这个问题？

JSFiddle：

http://jsfiddle.net/7fdjL3qx/

Answer 1

如果点击的项目不是目标，我们必须返回。 if (event.target !== this) return;

    jQuery('#items').on('click', function (event) {
        if (event.target !== this) return;
        event.preventDefault();
        $(this).toggleClass("semiCollapsed");
    });

小提琴： http://jsfiddle.net/abhiklpm/7fdjL3qx/1/

Answer 2

使用event.stopPropagation(); 而不是event.preventDefault();。

因为发生在子节点上的事件会传递给父节点，所以绑定在父节点上的所有事件也会被执行。

因此，要阻止事件冒泡到父级，您需要在子级点击事件上设置event.stopPropagation()。

Answer 3

您可以在 click 元素内使用检查 event.target.id，如果是 items，则只能切换类。

jQuery(document).ready(function() {
  jQuery('#items').click(function(event) {
    event.preventDefault();
    if(event.target.id=="items")
   {
    //use this for clicked element instead of finding it again using id
    $(this).toggleClass("semiCollapsed");
   }
  });
});