在元素上单击触发事件触发输入复选框两次

Question

当我单击 div 元素时，应该仅触发单击复选框一次，但由于某种原因，我的事件被触发了两次，我看到其他主题也有类似的问题，但没有人帮助我

$('div').click(function(e) {
  $('input').trigger('click');

  check();
});

function check() {
  if ($('input').is(':checked')) {
    console.log('input cheked')
  } else {
    console.log('unchecked')
  }
}

.test {
  height: 150px;
  width: 150px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <input type="checkbox" name="">
</div>

Answer 1

问题是因为单击发生在 上div，这会触发click子复选框，进而向上传播 DOM 并再次运行单击处理程序div。

如果您尝试为复选框创建更大的点击区域，只需使用一个label元素即可。然后你就可以免费获得这个行为，而不需要任何 JS。

如果您想知道复选框更改时的状态，请将change事件处理程序挂接到它。尝试这个：

$(':checkbox').on('change', function() {
  if (this.checked) {
    console.log('input checked')
  } else {
    console.log('unchecked')
  }
});

.test {
  height: 150px;
  width: 150px;
  background: red;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="test">
  <input type="checkbox" name="">
</label>