Home » Tutorial » Document and Events » Events

The default browser action

Ilya Kantor
  1. Cancel the browser action
  2. Browser’s “before” actions
  3. Handlers are independent
  4. Summary

A browser has its own “default” behavior for certain events.

For instance:

  • a click on the link causes navigation,
  • a right-button mouse click shows the context menu,
  • enter on a form field cases it’s submission to the server, etc.

The default behavior is usually not needed, when we handle the click by ourselves. In most cases it can be cancelled in the handler.

Cancel the browser action

There are generally two ways.

  • Event special method event.preventDefault() for W3C-compliant browsers and event.returnValue = false for IE<9.

    Cross-browser code:

    element.onclick = function(event) {
    event = event || window.event 

    if (event.preventDefault) {  // W3C variant 
        event.preventDefault()
    } else { // IE<9 variant:
        event.returnValue = false
    }
}

    Or, in a single line:

    ..
event.preventDefault ? event.preventDefault() : (event.returnValue=false)
...

  • Return false from the handler:
    element.onclick = function(event) {
  ...
  return false
}

    Returning false is simpler and used in most cases, but event.preventDefault() approach does not finish the handling, so it also has it’s usage.

In the following example, a link is clickable, but nothing happens, because the browser action is cancelled.

<a href="/" onclick="return false">Click me</a>

`return false` in frameworks

jQuery has it’s own event-handling layer. It wraps over the handler, and if the handler returns false, then both bubbling is stopped and the default action is prevented.

That differs from normal browser behavior, sometimes causing confusion.

Normally, the browser only cancels the default action, but the event continues to bubble. That’s the difference.

Browser’s “before” actions

There are browser actions which happen before the handler. These can’t be cancelled.

For example, when a link gets focus - most browsers outline it with a dashed border.

This action happens before the focus event, so it can’t be canceled in the onfocus handler.

Contrary to this, changing the URL happens after the click, so it can be prevented. 

<a href="/" onclick="return false" onfocus="return false">I get outlined on click, but don't go anywhere</a>

Bubbling and default action

Browser default action is independent from bubbling.
Cancelling default action does not stop bubbling and vise versa.

Handlers are independent

Handlers on the same element are also completely independent, their order is not defined.

In the example below, there is a TestStop button with two handlers: stop which does everything possible to stop the event, and then an alerting handler.

When the button is clicked, the alert is always shown:

<input type="button" id="TestStop" value="Test stop"/>

<script>
  elem = document.getElementById('TestStop')

  function stop(e) {
    e.preventDefault() // browser - don't act!
    e.stopPropagation() // bubbling - stop
    return false // added for completeness
  }

  elem.addEventListener('click', stop, false)

  // this handler will work
  elem.addEventListener('click', function() { alert('I still work') }, false)
</script>

Summary

  • Browser has it’s own actions on some events. Most of them can be cancelled.
  • There are two ways of cancelling the default action: use preventDefault()/returnFalse or return false from the handler. They are equal.
  • Default browser action is independent from bubbling. Other handlers on same element are also independent.

Tutorial