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>

我的parrent 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;
}

Bootstrap Collapse：

http://pastebin.com/Xfnq7R4i

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

的jsfiddle：

http://jsfiddle.net/7fdjL3qx/

Answer 1

使用event.stopPropagation();代替event.preventDefault();。

因为发生在儿童身上的事件会影响到父母，所以绑定在父母身上的所有事件也会被执行。

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

Answer 2

您可以在点击元素中使用检查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");
   }
  });
});

Answer 3

如果点击的项目不是目标，我们必须返回。 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/

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

3 个答案: