i have a div with keydown handler and button with click handler, in that keydown handler i am focusing a button with focus() method, but it triggers btn click handler. please tell why this happens

Note: press enter key on div

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown() {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
}

<div id='btn' onkeydown="btnKeyDown()" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

i have a div with keydown handler and button with click handler, in that keydown handler i am focusing a button with focus() method, but it triggers btn click handler. please tell why this happens

Note: press enter key on div

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown() {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
}

<div id='btn' onkeydown="btnKeyDown()" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

• javascript
• html

• 3 It only happens when you press Return, not any key. – Barmar Commented May 18, 2018 at 3:47
• I think it happens when you press enter because after you focus the button, the default event handler for keydown will run on the now focused button, if you pass the event and call e.preventDefault() it should prevent that. – Amr Noman Commented May 18, 2018 at 3:52
• yes i am pressing enter key – Madhan Commented May 18, 2018 at 4:25

3 Answers 3

This strange behavior only happens when you press the Return key. Pressing Return while focus is on an element is equivalent to clicking on it. So when you change the focus, the default action is performed on the newly focused element, not the original one.

Calling event.preventDefault() prevents this from happening.

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown(event) {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
  event.preventDefault();
}

<div id='btn' onkeydown="btnKeyDown(event)" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>

Because when you click the button it is clicking it. Key down is for keyboard. While we call what you made a button, it is not the button referred to when it says "onkeydown".

Barmar is also correct about the enter key. If that is the key you are using it would also trigger the onclick event.

Instead of onkeydown you need to use onfocus which will work on every browser

function btnclick() {
  console.log('button click triggered');
}

function btnKeyDown() {
  console.log('key down triggered');
  document.getElementById('btn1').focus();
 alert('key down triggered' +  document.getElementById('btn1').innerText);
  
}

<input type="text" id="txtVal" onfocus="btnKeyDown()" >
<div id='btn' onfocus="btnKeyDown()" tabindex='0'>Click1</div>
<button id='btn1' onclick="btnclick()">Click Me!2</button>