Почему событие не вызвало бесконечного цикла?

Question

var domInner = document.querySelector('#inner')
var domWrapper = document.querySelector('#wrapper')
domInner.onclick = innerHandler
function innerHandler () {
  console.log('inner')
}
domWrapper.onclick = wrapperHandler
function wrapperHandler () {
  // setTimeout(() => {
    console.log('wrapper')
    domInner.click()
  // }, 1000)
}
domInner.click()

<div id="wrapper">
  wrapper
  <div id="inner">
    inner
  </div>
</div>

Как мы видим, domInner.click() в функции wrapperHandler не срабатывает событие нажатия domInner.

Раньше я думал, что так и будет, и событие click domInner будет распространяться на domWrapper, так что это может вызвать бесконечный цикл.

Но это не так. Итак, в чем причина?

После того, как я открыл setTimeout, это произойдет.

Почему domInner.click() в функции wrapperHandler снова не запускается событие click domInner？ А почему событие не вызывает бесконечный цикл?

Спасибо.

Answer 1

Если вы вручную нажмете на свой внутренний элемент, вы заметите, что он заставляет ваши журналы дважды срабатывать. Один раз для фактического элемента click, затем снова для "смоделированного" элемента, с которым вы сработали element.click(),

Почему он не зацикливается? Что ж, похоже, что "симулированный" щелчок может быть выдан только один раз за элемент за итерацию цикла события. Попытки испустить его снова из того же элемента в той же итерации будут игнорироваться. Причина, по которой это позволяет, когда вы ставите setTimeout там, потому что setTimeout ставит его на более позднюю итерацию цикла событий.

Это, кажется, функция, встроенная в element.click метод, вероятно, с явной целью предотвращения таких бесконечных циклов. К сожалению, документация по MDN не особенно детализирована, и я не уверен, где еще копать, чтобы подтвердить.