单击事件和事件传播冒泡的奇怪行为

Question

假设这个UI：

<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>

我想要的是能够通过单击父input来选择一个收音机li。不幸的是，接口不是由我构建的，所以我无法适当地设置for属性(将它们放在li中，而不是在labels中)。

所以我唯一的资源就是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();)之后，我仍然得到双“点击”的alerts，而没有“冒泡”alerts。

所以基本上它工作得很好，我得到了我想要的效果，我只是不明白为什么我会得到双alert，我在这里遗漏了什么？

这里是我创建的一个小小提琴，可以帮助您更轻松地帮助我。在小提琴中，我还添加了一些额外的JS代码，这些代码添加了几个类，以便根据我的需要实现li的着色。提亚

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>

​