Is there a way to force browsers to NOT preventDefault when adding an event listener to a submit button?

I have a test code like this:

<html>

<body>

</html>
<form method='get' action='https://www.duckduckgo.com/'>
  <button id='123' type='submit'>test</button>
  <script>
    const button = document.getElementById('123');
    button.addEventListener('click', (event) => {
      button.setAttribute('disabled', 'disabled');
      return true;
    }, true);
  </script>
</form>
</body>

</html>

The intention is that the button gets disabled, but then the event is propagated upwards and the form is still submitted. It works perfectly in SeaMonkey, but something prevents the default form submission in Firefox, Chrome, and (according to comments) Safari.

How do I make the form submit (i.e., not do event.preventDefault()) unless I specifically instruct it to? Is there event.doNotPreventDefault()?

Solution

The sequence of events (as I know) is like this:

mousedown->click->submit->formdata

If you disable button for submitting before submit event, form will never be submitted. Form is submitted only if it has submit button and it is enabled.

Put your listener to submit event, or even formdata. Then it works.

document.getElementById('send').addEventListener('mousedown',(e)=>{
  log(e);
})

document.getElementById('send').addEventListener('click',(e)=>{
  log(e);
  //send.disabled=1;
})

document.getElementById('f1').addEventListener('submit',(e)=>{
  log(e);
  send.disabled=1;
})

document.getElementById('f1').addEventListener('formdata',(e)=>{
  log(e);
})

var n=0;
function log(e){
    loggg.innerHTML+=`${++n} ${e.type} <br>`
}

<form id=f1 method=get action='#' target=_blank>
<input type=submit value=123 name=send id=send>

</form>

<div id="loggg">
</div>