Stop form submission with submit eventlistener

Question

I'm trying to stop a form from submitting using the submit eventlistener. My anonymous function runs but the form still submits, even with return false at the end of the function. There are no JS errors being thrown.

Am I making some stupid mistake?

<form id="highlight">
    Row: <input type="text" name="rows" value="1" id="rows">
    Column: <input type="text" name="cells" value="1" id="cells">
    <input type="submit" name="Submit" value="Highlight" id="Submit">
</form>

<script>
var highlight_form = document.getElementById('highlight');
highlight_form.addEventListener('submit', function() {
        alert('hi');
    return false;
}, false);
</script>

Answer 1

I always call event.preventDefault() on event listeners that I want to cancel the event for, as well as return false. This always works for me.

<script>
var highlight_form = document.getElementById('highlight');

highlight_form.addEventListener('submit', function(event)
{
    event.preventDefault();
    alert('hi');
    return false;

}, false);
</script>