[javascript] event.preventDefault() vs. return false (no jQuery)



Answers

Difference between preventDefault, stopPropogation, return false

Default Action – Server side action when control event raise.

Suppose we have div control and inside it we have a button. So div is the parent control of the button. We have Client side click and server side click event of the button. Also we have client side click event of the div.

On click event of the button on client side, we can control the actions of parent control and server side code using following three ways:

  • return false - This allow only client side event of the control. Server side event and client side event of the parent control is not fired.

  • preventDefault() - This allow client side event of control and its parent control. Server side event ie. Default action of the control is not fired.

  • stopPropogation() – This allow client side as well as server side event of the control. Client side event of the control is notallowed.

Question

I wondered if event.preventDefault() and return false were the same.

I have done some tests, and it seems that

  • If the event handler is added using old model, for example

    elem.onclick = function(){
        return false;
    };
    

    Then, return false prevents default action, like event.preventDefault().

  • If the event handler is added using addEventListener, for example

    elem.addEventListener(
        'click',
        function(e){
            return false;
        },
        false
    );
    

    Then, return false doesn't prevent the default action.

Do all browsers behave like this?

Are there more differences between event.preventDefault() and return false?

Where I can find some documentation (I couldn't in MDN) about return false behaving like event.preventDefault() in some cases?


My question is only about plain javascript, not jQuery, so please don't mark it as a duplicate of event.preventDefault() vs. return false, even if both questions have almost the same title.






Related