При нажатии элемента триггер события запускается дважды для ввода

Question

когда я нажимаю на элемент div, должен срабатывать флажок click только один раз, но по какой-то причине я получаю событие дважды, я видел другие темы с похожей проблемой, но никто не помог мне

$('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>

Answer 2

JQuery использует всплывающее окно при настройке событий. Это означает, что когда вы щелкаете по входу, событие запускается один раз для входа, а затем оно «всплывает» вверх по дереву DOM к родительскому DIV. Это тогда замечает событие щелчка на DIV и запускается снова. Поэтому событие запускается дважды, один раз для входа и еще раз для DIV.

Чтобы остановить это, вам нужно будет использовать технику «захвата» вместо всплытия событий. Это будет означать, что вы будете использовать addEventListener и передавать параметр в качестве третьего аргумента как true.

См. Здесь: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Также см. Здесь для понять пузыри против захвата: https://javascript.info/bubbling-and-capturing

Answer 3

Ваш флажок находится внутри div, и вы привязываете щелчок evet к div, и с этого момента вы запускаете событие щелчка checkbox, которое снова вызывает щелчок div. Вот почему он срабатывает 2 раза.

Вы можете напрямую go для события смены флажка:

$(':checkbox').on('change', function() {
  if (this.checked) {
    console.log('input checked')
  } 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 4

Это потому, что когда вы нажимаете триггер на входе, событие становится пузырем для всех его родителей. Чтобы остановить это, используйте e.stopPropagation в обработчике события щелчка ввода.

$('input').click(function(e) {
  e.stopPropagation();
});

Подробнее о всплытии и захвате здесь .

Проверьте рабочий код ниже:

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

$('input').click(function(e) {
  e.stopPropagation();
});


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>