How to prevent onclick statements from being executed?

Question

I want to use an event listener for preventing the onclick statement of a submit button, however, using event.preventDefault() doesn't work as intended.

The code is like this:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title></title>

</head>

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

</body>

</html>

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.

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

score 3 · Accepted Answer · answered May 05 '10 at 08:13

3

DOM0 handlers (onclick attributes and the like) and DOM2 handlers (dynamically added via attachEvent/addEventListener) are independent of one another.

The only thing you can do is remove the DOM0 handler (by assigning an empty string to the attribute) and go with just DOM2 handlers.

You can retrieve the DOM0 handler from the attribute before removing it, and re-register it as a DOM2 handler instead. You get into some browser inconsistencies (some will give you a Function object, others will give you a string), but those are readily handled in the code.

answered May 05 '10 at 08:13

T.J. Crowder

1,031,962
187
1,923
1,875

2

+1 - was writing something similar to this. Try to think of `preventDefault()` as preventing the default action of an element - the action that would happen if no event were set. Setting an event via the `onclick` attribute is not setting the default action, so `preventDefault()` will not prevent that handler from being called. – Andy E May 05 '10 at 08:20

score -1 · Answer 2 · answered May 05 '10 at 08:18

-1

You can try this:

 function addListener() {
        document.getElementById("submit").addEventListener("click",
            function(ev) {
                alert("listener");
                ev=ev¦¦event; 
                ev.preventDefault? ev.preventDefault() : ev.returnValue = false; 
            },
            false);
    }

answered May 05 '10 at 08:18

Andreas

5,305
4
41
60

This would have the same effect on Firefox…. Your code only solves the compatibility issue for older browsers. – Ryan Li May 05 '10 at 08:23
Add a `return false;` at the end of the command list in the 'click' handler. Your click event WILL GET FIRED - when you use the addEventListener('click',handler(){}); This is the event capturing and firing part - (MS also defines the event bubbling phase) - if you find a way to force the event to 'cancel execution' after registering a handler I am interested in knowing about it..regards – Andreas May 05 '10 at 08:43

How to prevent onclick statements from being executed?

2 Answers2

Linked