javascript if statement boolean comparison not working

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>

This code shouldn't trigger the 'click' event when the 'keydown' event is triggered. For example, when I'm long pressing 'A' it means that 'keydown' is triggered so when I click anywhere in the contenteditable element, the console.log inside the if statement should not be triggered. However, I get this result.

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

The value of keydownTriggered is true is seen in line 13 but the if statement is still triggered.

I tried changing the if statement to (keydownTriggered == true), (keydownTriggered === true) and tried changing all boolean value to numbers (true to 1 and false to 0) but got nothing. What am I doing wrong here?

Wai Ha Lee · Accepted Answer · 2020-08-01 17:08:02Z

1

You should add if statement in the click event inside, otherwise when you click, the click event callback will always be run

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);
    }
})

edited Aug 1, 2020 at 17:08

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Aug 1, 2020 at 10:16

Terence Cheng

5942 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript if statement boolean comparison not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related