單擊子項時會觸發Jquery Parent Class事件

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

您正在經歷的事件稱為事件冒泡 。 在層次結構中更深層次的元素上觸發的事件將“冒泡”到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.