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

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 не вызвала событие click domInner.

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

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

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

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

Спасибо.

Answer 1

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

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

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