HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="testdiv">
<button type="button"></button>
</div>
<body>
<html>
CSS:
button {
background-color: skyblue;
height: 75px;
width: 150px;
border-radius: 5px;
}
JavaScript:
const testdiv = document.querySelector('.testdiv');
document.addEventListener('click', (event) => {
console.log('I was clicked');
});
Open your console, now click the blue button. Then press the Enter key. Notice how the keypress caused the button to click. Now, click it again, but this time click in the white space afterwards and then press Enter. Notice that nothing is logged in the console.
Why does the enter key cause an element to be clicked after the element has been selected with the mouse, and how do you disable this feature?
If I wanted to map a keydown or keyup event for the Enter key to a different element without the console being logged in this program, I would have a serious problem.
I'm not sure the cause of this behavior. I noticed Tab exhibits a weird behavior too where if multiple elements are present and one is selected by the mouse, you can press Tab and it will select the next element. This doesn't bother me, but it's another example of these pre-bound key behaviors that I would like to be able to disable.
event.preventDefault(). It may still be beneficial to include your code or some equivalent but simplified example so we can see what you are trying to do.