event.preventDefault() vs. return false (no jQuery)
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.
The W3C Document Object Model Events Specification in 1.3.1. Event registration interfaces states that handleEvent in the EventListener has no return value:
handleEvent This method is called whenever an event occurs of the type for which the EventListener interface was registered. [...] No Return Value
under 1.2.4. Event Cancelation the document also states that
Cancelation is accomplished by calling the Event's preventDefault method. If one or more EventListeners call preventDefault during any phase of event flow the default action will be canceled.
which should discourage you from using any effect that returning true / false could have in any browser and use event.preventDefault() .
Update
The HTML5 spec actually specifies how to treat a return value different. Section 6.1.5.1 of the HTML Spec states that
If return value is a WebIDL boolean false value, then cancel the event.
for everything but the "mouseover" event.
Conclusion
I would still recommend to use event.preventDefault() in most projects since you will be compatible with the old spec and thus older browsers. Only if you only need to support cutting edge browsers, returning false to cancel is okay.
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.
return false仅适用于IE，chrome，ff ...现代浏览器支持event.preventDefault()
上一篇: 如何取消？