title: Django/vanilla javascript ajax posts successfully but the page still reloads
body: <p>Ajax submitting a form works, but I'm unable to stop the page reload.</p>
  
  <p>I've tried several variations of event listening by id. On the form, the button, tried using inline onclick, onsubmit, tried putting the button outside of the form. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form method="post" id="form1"&gt;
        {% csrf_token %}
        {{ form|crispy }}
        &lt;button type="submit"&gt;Click&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <pre><code>function parse_cookies() {
      var cookies = {};
      if (document.cookie &amp;&amp; document.cookie !== '') {
          document.cookie.split(';').forEach(function (c) {
              var m = c.trim().match(/(\w+)=(.*)/);
              if(m !== undefined) {
                  cookies[m[1]] = decodeURIComponent(m[2]);
              }
          });
      }
      return cookies;
  }
  var cookies = parse_cookies();
  
  var title = document.getElementById('title_identifier');
  
  function ajax_function() {
    var request = new XMLHttpRequest();
    request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    var formElement = document.querySelector("#id_comment");
    request.send(new FormData(formElement));
  }
  
  form = document.getElementById('form1')
  form.addEventListener('submit', ajax_function)
  </code></pre>
  
  <p>If I change the event handler from the form to the button or vice versa, it posts successfully with the message shown in chrome dev tools being:
  (1)</p>
  
  <pre><code>VM667 ajax_post_function.js:22 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".
  
  Navigated to http://localhost:8000/ajax_post_function/WhateverTitle/
  </code></pre>
  
  <p>But it just goes back to the top of the page again.</p>
  
  <p>However, If I use this ajax function, then the comment is not submitted, and the response from the chrome dev tools is:</p>
  
  <pre><code>function ajax_function(e) {
    var request = new XMLHttpRequest();
    request.open("POST", `/ajax_post_function/${title.textContent}/`, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    var formElement = document.querySelector("#id_comment");
    request.send(new FormData(formElement));
    e.preventDefault();
  }
  </code></pre>
  
  <pre><code>ajax_post_function.js:34 XHR finished loading: POST "http://localhost:8000/ajax_post_function/WhateverTitle/".
  </code></pre>
  
  <p>If I use:</p>
  
  <pre><code>return false;
  </code></pre>
  
  <p>in either version of the ajax_function,
  The form submits successfully, but reloads again and returns to the top of the page, with the message in chrome dev tools being the same as in the (1) example.</p>
  
  <p>I've been using shift + f5 in between changes as cache busting. I'd rather not use jquery.</p>
  
  <p>The view function serving the route is long(ish) and I'm not sure if it's relevant so I didn't post it here. Ajax posts to the same route it's on.</p>