How to prevent onclick statements from being executed?
<p>I want to use an event listener for preventing the <code>onclick</code> statement of a submit button, however, using <code>event.preventDefault()</code> doesn't work as intended.</p>

<p>The code is like this:</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;script type="application/x-javascript"&gt;
        function addListener() {
            document.getElementById("submit").addEventListener("click",
                function(ev) {
                    alert("listener");
                    ev.preventDefault();
                },
                false);
        }
    &lt;/script&gt;

    &lt;title&gt;&lt;/title&gt;

&lt;/head&gt;

&lt;body onload="addListener();"&gt;
&lt;form id="form" method="post" target=""&gt;
&lt;input type="submit" id="submit" onclick="alert('onclick')" value="test" /&gt;
&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>The expected behaviour is only "listener" will be alerted, but in practice (Firefox 3.7a5pre), "onclick" and "listener" are both alerted, in the given order.</p>

<p>It seems that <code>onclick</code> is being executed before the listener, so <code>event.preventDefault()</code> doesn't work. Is there a way to prevent <code>onclick</code> from being executed?</p>
