Prevent onclick event on a button from firing when hitting Enter in a different box
Its default HTML behaviour. All the buttons inside a form are of type="submit". On pressing enter, the most recent button of the form is clicked and their handlers are called, by default. To fix this, the buttons are created with type="button".
console.log(document.querySelector("#a").type)console.log(document.querySelector("#b").type)console.log(document.querySelector("#c").type)<form> <input type="text"> <button id="a" onclick="console.log('a')">Submit type</button> <button id="b" onclick="console.log('b')" type="button">Button type</button> <input id="c" type="submit" value="Input Submit type"></form>You can refer this to understand the behaviour of <button> and <input type="button">.
If you just check in console like, document.querySelector("#box").children[1].type it will show as submit.
Button, by default, acts as submit type unless it is specified explicitly (either submit(default)/reset/button). Just run document.querySelector("#box").children[1].type=button. You find it working as expected.
The behaviour is same in cross-browser and tested in Firefox Nightly (developer version), Chrome and Safari and works a little bit different in IE.
Also you can see the click is by default by seeing console.log(event.detail) is 0 as it is triggered internally. When triggered with a left click, it would be 1. MDN Docs on click event
i tried the following code in firefox browser and it works as expected.
function createModal(buttonBar){ var div = document.createElement("div"), input = document.createElement("input"), btn = document.createElement("button"); div.id = "box"; input.type = "text"; btn.type = "button"; btn.innerHTML = "Button"; btn.onclick = function(e){ console.log("I was called"); input.focus(); console.dir(e); console.trace(); }; div.appendChild(input); div.appendChild(btn); return div;}setInterval(function () { var cont = document.querySelector(".wmd-container:not(.processed)"), ul, buttonBar, div; if (cont && (ul = cont.querySelector(".wmd-button-bar ul"))) { cont.classList.add("processed"); buttonBar = cont.querySelector("div[id^=wmd-button-bar]"); div = createModal(buttonBar); buttonBar.appendChild(div); }}, 500);notice that i have set the btn.type="button"; this makes sure the form is not submitted and also removed e.preventDefault(); as button will never submit the form now.
keep in mind that by default if you don't give a type to a button element then it will behave like a submit button.
also the MouseClick event was firing because the click event is triggered on submit buttons present within the form when submitting the form. as you had the button without the type attribute it was working like a submit button. so the MouseClick event was fired when you hit enter (as its submitting the form).
you can verify this by adding an onclick handler from your browser developer tool to the Save edits submit button and hit enter on the text field.
The short and simple answer, is to force type for your button element:
<button type="button"></button>It defaults to type="submit", and that's why it acts accordingly.