javascript если логическое сравнение операторов не работает

Question

var keydownTriggered = false;
console.log(keydownTriggered);
document.getElementById('form').addEventListener('keydown', e => {
  setTimeout(function() {
    console.log("Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
    console.log("Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
    keydownTriggered = true;
    console.log(keydownTriggered);
  }, 0);
})
document.getElementById('form').addEventListener('keyup', e => {
  keydownTriggered = false;
  console.log(keydownTriggered);
})

if (!keydownTriggered) {
  document.getElementById('form').addEventListener('click', e => {
    console.log("Click: Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
    console.log("Click: Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
    keydownTriggered = false;
    console.log(keydownTriggered);
  })
}

<div id="form" contenteditable="true"></div>

Этот код не должен запускать событие 'click' при запуске события 'keydown'. Например, когда я долго нажимаю 'A', это означает, что срабатывает 'keydown', поэтому, когда я щелкаю в любом месте элемента contenteditable, console.log внутри оператора if не должен запускаться. Однако я получаю этот результат.

test.html:10 Keydown Start Offset 8
test.html:11 Keydown End Offset 8
test.html:13 true
test.html:23 Click: Keydown Start Offset 8
test.html:24 Click: Keydown End Offset 8
test.html:26 false
test.html:10 Keydown Start Offset 9
test.html:11 Keydown End Offset 9

Значение keydownTriggered равно true видно в строке 13, но оператор if все еще срабатывает.

Я попытался изменить if на (keydownTriggered == true), (keydownTriggered === true) и попытался изменить все логические значения на числа (true на 1 и false на 0), но ничего не получил. Что я здесь делаю не так?

Answer 1

Вы должны добавить if statement в click event inside, иначе, когда вы нажмете, the click event callback всегда будет запущен

document.getElementById('form').addEventListener('click', e => {
    if (!keydownTriggered){
        console.log("Click: Keydown Start Offset", window.getSelection().getRangeAt(0).startOffset);
        console.log("Click: Keydown End Offset", window.getSelection().getRangeAt(0).endOffset);
        keydownTriggered = false;
        console.log(keydownTriggered);
    }
})