event.preventDefault() vs. return false (no jQuery)

by

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 7.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.

More Related Contents:

  1. How can I capture the right-click event in JavaScript? [duplicate]
  2. Accessing an object’s property from an event listener call in JavaScript
  3. jQuery equivalent of JavaScript’s addEventListener method
  4. Are event handlers in JavaScript called in order?
  5. Handling “onclick” event with pure JavaScript
  6. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  7. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  8. event.preventDefault() vs. return false
  9. What is DOM Event delegation?
  10. window.onload vs document.onload
  11. What’s the difference between event.stopPropagation and event.preventDefault?
  12. Detecting Browser Autofill
  13. Firing event on DOM attribute change
  14. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  15. How to find out which JavaScript events fired?
  16. How can I trigger an onchange event manually? [duplicate]
  17. DOM event precedence
  18. Javascript event handler with parameters
  19. Handle URL fragment identifier (anchor) change event in Javascript
  20. Pass mouse events through absolutely-positioned element
  21. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  22. How to pass event as argument to an inline event handler in JavaScript?
  23. How do you detect the clearing of a “search” HTML5 input?
  24. Implementing jQuery’s “live” binder with native Javascript
  25. Remove key press delay in Javascript
  26. How to unbind a specific event handler
  27. Is event a global variable that is accessible everywhere inside the callback chain?
  28. Fire oninput event with jQuery
  29. How can I remove a JavaScript event listener?
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment