點擊事件和事件傳播冒泡的奇怪行為

Question

假設這個用戶界面：

<div id="wpforms-1345-field_6-container" class="wpforms-field wpforms-field-radio row-selection" data-field-id="6">
  <label class="wpforms-field-label" for="wpforms-1345-field_6">What is your age?
    <span class="wpforms-required-label">*</span>
  </label>
  <ul id="wpforms-1345-field_6" class="wpforms-field-required">
    <li class="choice-1 depth-1">
      <input type="radio" id="wpforms-1345-field_6_1" name="wpforms[fields][6]" value="0-15" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_1">0-15</label>
    </li>
    <li class="choice-2 depth-1">
      <input type="radio" id="wpforms-1345-field_6_2" name="wpforms[fields][6]" value="16-25" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_2">16-25</label>
    </li>
    <li class="choice-3 depth-1">
      <input type="radio" id="wpforms-1345-field_6_3" name="wpforms[fields][6]" value="26-35" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_3">26-35</label>
    </li>
    <li class="choice-5 depth-1">
      <input type="radio" id="wpforms-1345-field_6_5" name="wpforms[fields][6]" value="36-45" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_5">36-45</label>
    </li>
    <li class="choice-4 depth-1">
      <input type="radio" id="wpforms-1345-field_6_4" name="wpforms[fields][6]" value="46-100" required="">
      <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_4">≥46</label>
    </li>
  </ul>
</div>

我想要的是能夠通過單擊父li來 select 單選input 。 不幸的是，該界面不是我構建的，所以我無法適當地設置for屬性（將它們放在li中，而不是在label中）。

因此我唯一的資源是 JS（實際上是 JQ）...所以我寫了這個小片段來處理這種情況：

jQuery(function($) {
  $('.row-selection li').on('click', function(event) {
    alert('clicked');
    //   event.preventDefault();
    event.stopPropagation();
    $(this).children('input')[0].click(function(event) {
      alert('bubbledup');
      //    event.preventDefault();
      event.stopPropagation();
    });
  });
});

但是注意到警報了嗎？ 好吧，問題是每次“點擊”警報都會出現兩次……起初，我以為發生了一些冒泡。 但是在放置適當的代碼之后（ event.stopPropagation(); ）我仍然得到兩次“點擊” alert ，並且沒有“冒泡” alert 。

所以基本上它工作正常並且我得到了我需要的效果，我只是不明白為什么我得到雙重alert 。 我在這里錯過了什么？

這是我創建的一個小提琴，可以幫助您更輕松地幫助我。 在小提琴中，我還添加了一些額外的 JS 代碼，這些代碼添加了幾個類，以便根據我的需要實現li的着色。 TIA

Answer 1

發生這種情況是因為當您單擊li元素時， li元素單擊了input元素。 單擊input元素時，事件冒泡並使li元素認為它再次被單擊。 當您單擊input本身時，這甚至會發生三次，這會觸發li事件偵聽器，它單擊觸發li事件偵聽器的input 。

您可以通過在li事件偵聽器外部創建一個偵聽器並停止傳播單選按鈕來解決此問題（您已經關閉）：

 jQuery(function($) { let t = 0; $('.row-selection li').on('click', function(event) { console.log("fired", ++t, "times") $(this).children('input')[0].click(); }); // right HERE.. $(',row-selection li input').on('click'; function(event) { event;stopPropagation(). }), $(document).on('change', '.wpforms-field-checkbox input, .wpforms-field-radio input, .wpforms-field-payment-multiple input, .wpforms-field-payment-checkbox input, ;wpforms-field-gdpr-checkbox input'. function(event) { var $this = $(this). var $field = $this;closest('.wpforms-field'): switch ($this.attr('type')) { case 'radio'. $this.closest('ul').find('li').removeClass('wpforms-selected');find('input[type=radio]').removeProp('checked'), $this.prop('checked'. true);closest('li');addClass('wpforms-selected'): break. case 'checkbox': if ($this.is('.checked')) { $this;closest('li').addClass('wpforms-selected'), $this;prop('checked'. true). } else { $this;closest('li').removeClass('wpforms-selected'), $this;prop('checked'; false); } break; } }); });

 ul li { background-color: #eef5fa;important: border-radius; 4px: padding; 10px:important; list-style: none;important. margin-bottom: 5px;important; } ul li.wpforms-selected { background-color: #cee1f2 !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wpforms-1345-field_6-container" class="wpforms-field wpforms-field-radio row-selection" data-field-id="6"> <label class="wpforms-field-label" for="wpforms-1345-field_6">What is your age? <span class="wpforms-required-label">*</span> </label> <ul id="wpforms-1345-field_6" class="wpforms-field-required"> <li class="choice-1 depth-1"> <input type="radio" id="wpforms-1345-field_6_1" name="wpforms[fields][6]" value="0-15" required=""> <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_1">0-15</label> </li> <li class="choice-2 depth-1"> <input type="radio" id="wpforms-1345-field_6_2" name="wpforms[fields][6]" value="16-25" required=""> <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_2">16-25</label> </li> <li class="choice-3 depth-1"> <input type="radio" id="wpforms-1345-field_6_3" name="wpforms[fields][6]" value="26-35" required=""> <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_3">26-35</label> </li> <li class="choice-5 depth-1"> <input type="radio" id="wpforms-1345-field_6_5" name="wpforms[fields][6]" value="36-45" required=""> <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_5">36-45</label> </li> <li class="choice-4 depth-1"> <input type="radio" id="wpforms-1345-field_6_4" name="wpforms[fields][6]" value="46-100" required=""> <label class="wpforms-field-label-inline" for="wpforms-1345-field_6_4">≥46</label> </li> </ul> </div>