title: window.stop() isn't working onclick
body: <p>I have a form, that takes input, gets validated and if everything is good, I allow the request and pop up a modal that gives them the ability to <em>cancel</em> (because it takes ~2 seconds to process with a file). </p>
  
  <pre><code>mainForm.onsubmit = function() {
    const title = document.getElementById('grow_journal_entry_title').value;
    const notes = document.getElementById('grow_journal_entry_notes').value;
    const file = document.getElementById('file').value;
    // Check if the FILE was inputted, because the title and notes are HTML validated
    if (title &amp;&amp; notes){
      if (file){
        // display modal
        modal.style.display = "block";
      }
      else {
        // Focus on the #upload-button-area div.
        document.getElementById('upload-button-area').focus();
        alert("Please attach a photo to your journal entry.");
        return false
      }
    }
  }
  </code></pre>
  
  <p>Makes sense, but now,here is how I have my "cancel" function. </p>
  
  <pre><code>cancelBtn.addEventListener('click', function(){
    window.stop();
    console.log('Cancel button clicked.');
    modal.style.display = "none";
    return false
  });
  </code></pre>
  
  <p>However, everything works, except <strong>the request still goes through</strong>. The console prints out <code>Cancel button clicked</code>, the modal closes, but for some reason the <code>window.stop()</code> isn't doing anything.</p>
  
  <p>I even tried to do this: </p>
  
  <pre><code>&lt;input id="cancelUpload" class="btn advance-btn sub-text-secondary btn-secondary-col" value="Cancel Upload" type="submit" onclick="stopSubmission()"&gt;
  </code></pre>
  
  <p>And: </p>
  
  <pre><code>function stopSubmission(){
    try {
      window.stop();
    } catch (exception) {
      document.execCommand('Stop');
    }
    console.log("Should have stopped.")
  }
  </code></pre>