Question

嗨我有孩子ul和父李，这是jquery的目标，它在其中点击事件切换“显示”类。我面临的问题是，由于某些原因，当我点击子ul li元素时，它也会触发该事件。如何防止？

这是我的代码。

<script>
    $(document).ready(function() {
        $('.dropdown').click(function(e) {
            e.stopPropagation();
            $(this).toggleClass('shown');
            e.preventDefault();
        })
    })
</script>


<li class="dropdown"><a title="Installation" href="#">Installation <span class="caret"></span></a>
    <ul role="menu" class="dropdown-menu">
        <li>
            <a title="Wood Floor Installation" href="">Wood Floor Installation</a></li>
        <li>
            <a title="Sub Floor Preparation" href="">Sub Floor Preparation</a></li>
        <li>
            <a title="Type of your subfloor" href="">Type of your subfloor</a></li>
        <li>
            <a title="Wood Floor Fitting Method" href="">Wood Floor Fitting Method</a>
        </li>
    </ul>
</li>

Answer 1

您指定要在下拉列表中的所有内容触发事件。如果你只想要顶级A，它看起来更像是这样：

jQuery(document).ready(function($) {
   $('.dropdown>a').click(function(e) {
     $(this).parent().toggleClass('shown');
     e.preventDefault();
   })
})

Answer 2

使用e.stopPropagation()您不希望点击冒泡的地方

Answer 3

您遇到的问题称为event bubbling。在层次结构中更深层次的元素上触发的事件将会导致＆＃34;冒泡＆＃34;直到DOM树的根，因此父<li>元素接收由子元素实例化的点击事件。

解决此问题的最简单方法是通过选中event.target来检查触发原始事件的元素：

<script>
  jQuery(document).ready(function($) {
     $('.dropdown').click(function(e) {
       if (!$(e.target).is('.dropdown-toggle'))
        return;

       $(this).toggleClass('shown');
       e.preventDefault();
     })
  })
</script>


<li class="dropdown"><a title="Installation" href="#" data-toggle="dropdown" class="dropdown-toggle">Installation <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
      <li>
          <a title="Wood Floor Installation" href="">Wood Floor Installation</a></li>
      <li>
          <a title="Sub Floor Preparation" href="">Sub Floor Preparation</a></li>
      <li>
          <a title="Type of your subfloor" href="">Type of your subfloor</a></li>
      <li>
          <a title="Wood Floor Fitting Method" href="">Wood Floor Fitting Method</a>
      </li>
  </ul>
</li>

Answer 4

请尝试stopImmediatePropagation()，如下所示：

$(document).on('click', '#child_element', function(event) {
   event.stopImmediatePropagation();
})

Answer 5

您可以使用目标属性。只需在子元素中使用此代码即可。 target="_parent"

谢谢， Hayat S。

单击子项时会触发Jquery Parent Class事件

5 个答案: