Why is onclick for the first button in a form triggered when I hit ENTER key (and no keyCode in event)?

Question

Why is onclick for the first button in a form triggered when I hit ENTER key? I am trying to figure out why onclick was triggered by the ENTER key, and then have the function go ahead if it was an actual mouse/tap button click, or have the function ignore the key press if it was the ENTER key.

I tried checking the event.keyCode (passed into javascript function), but it is undefined.

In fact the only property that seems to be set is event.isTrusted but no other properties exist.

EDIT: Created new demo code to better explain the issue I am having...

Here is js fiddle with the issue: https://jsfiddle.net/Ld142qx3/24/

When you put the cursor in the Quantity 2 input box (the second box) and you click enter, it fires the onclick event for the first LESS button in front of the Quantity 1 input box.

There is no keyCode property passed in with event to identify whether onclick was actually triggered by clicking with a mouse or triggered by ENTER key.

My original test code HTML is:

<form onsubmit="return false;">
  Quantity 1: <button id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br>
  Quantity 2: <button id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

And my original javascript to go with it is:

function b1Less(_id, _event) {
  alert(_event.keyCode);
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}
function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}
function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

Answer 1

Your problem is that the type of a button inside a form defaults to a "submit" button (see the spec), and when a form is implicitly submitted (which happens when you press ENTER in an input field, the first "submit" button in the form also has its onclick event handler triggered (see the spec). Changing your buttons to have type="button" resolves the issue:

function b1Less(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val - 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b1More(_id, _event) {
  _val = parseInt(document.getElementById('q1').value);
  _val = _val + 1;
  document.getElementById('q1').value = _val;
  return false;
}

function b2Less(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val - 1;
  document.getElementById('q2').value = _val;
  return false;
}

function b2More(_id, _event) {
  _val = parseInt(document.getElementById('q2').value);
  _val = _val + 1;
  document.getElementById('q2').value = _val;
  return false;
}

<form onsubmit="return false;">
  Quantity 1: <button type="button" id="b1-less" onclick="return b1Less(this.id, event);">less</button>
  <input type="text" id="q1" value="10" size="10">
  <button type="button" id="b1-more" onclick="return b1More(this.id, event);">more</button>
  <br> Quantity 2: <button type="button" id="b2-less" onclick="return b2Less(this.id, event);">less</button>
  <input type="text" id="q2" value="5" size="10">
  <button type="button" id="b2-more" onclick="return b2More(this.id, event);">more</button>
</form>

Answer 2

As checked doClickMeButton function event is a mouse event and mouse event doesn't have keyboard binding details.
You can bind a keyboard-based events on an input tag. I have mentioned the code below which behaves the same as you wanted.

function doClickMeButton() {
  alert("I am called");
}

function doMoreLess(_id) {
  alert("clicked on " + _id);
  return false;
}

function myFunction(event) {
  var x = event.which || event.keyCode;
  if (x === 13) {
    console.log(event.which, "which"), console.log(event.keyCode, "keycode");
    doClickMeButton();
  }
}

 <form>
 
         // first thing I dont know why you need this button
        <button id="my-button"
       
        onclick="">CLICK ME</button>
      
        <br>
        Enter something in the input textbox below, and hit the ENTER key and notice that:<br>
        &nbsp;&nbsp;(1) keyCode is undefined, and<br>
        &nbsp;&nbsp;(2) ENTER fires the onclick action of the first element with an onclick in it.
        <br>
      
        <button id="less" onclick="return doMoreLess(this.id);">
        less
        </button>
        <input type="text" size="10"  onkeypress="myFunction(event)">
        <button id="more" onclick="return doMoreLess(this.id);">
        more
        </button>
      </form>