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

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

0 голосов
/ 25 апреля 2018 

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？ И почему событие не вызвало бесконечный цикл?

Спасибо.

1 Ответ

0 голосов
/ 25 апреля 2018

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

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

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

...