Event order

^.^

HTML

<pre>
1. Scenario ONE
1.a Focus the input
1.b click the submit button


2. Scenario TWO
2.a Focus the input
2.b Mouse down _on the submit_
2.c not releasing the mouse -- move it on the submit
2.d release the mouse on top of submit

</pre>


<input id="inpt" placeholder="will error on blur">

<div id="error">
  error
</div>

<div id="warning">
  workaround possibility!!
</div>

<div id="success">
  success
</div>

<button id="submit">submit</button>
<button id="reset">reset</button>

<pre>




3. Scenario A NEW HOPE
3.a Focus the input
3.b Click on <button id="workaround">ME</button>
</pre>

JavaScript

const showError = () => error.style.display = 'block';
const hideError = () => error.style.display = 'none';

const showSuccess = () => success.style.display = 'block';
const hideSuccess = () => success.style.display = 'none';

const showWarning = () => warning.style.display = 'block';
const hideWarning = () => warning.style.display = 'none';

const resetLog = () => {
  hideError();
  hideSuccess();
  hideWarning();
}

resetLog();

inpt.addEventListener("focus", hideError, true);
inpt.addEventListener("blur", showError, true);

submit.addEventListener("click", showSuccess, true);
workaround.addEventListener("mousedown", showWarning, true);
reset.addEventListener("click", resetLog, true);