In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onbeforeactivate

onbeforeactivate event | beforeactivate event

Browser support:

Occurs before an element becomes active.

The onbeforeactivate event is cancelable (unlike the onactivate event), therefore it is useful if you want to prevent the activation of an element. Unfortunately it does not work for all elements and actions. For details see the 'Actions that invoke the onbeforeactivate event' section.

To detect when an element loses its active state, use the onbeforedeactivate and ondeactivate events.

How to register:

In HTML:

In JavaScript:

object.onbeforeactivate = handler;

object.addEventListener ("beforeactivate", handler, useCapture);

9

object.attachEvent ("onbeforeactivate", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	Partially
Event object	UIEvent

Actions that invoke the onbeforeactivate event:

Clicking on a non-active element that can be active (see the setActive method).
Navigating to an element with the TAB or an access key.
Invoking the setActive method on a non-active element that can be active.
Invoking the focus method on a non-active element that can be active.

The onbeforeactivate event is not cancelable if it is triggered by the setActive or focus method. If the onbeforeactivate event is triggered by the TAB key, then it is cancelable. For other actions (clicking and pressing an access key) the onbeforeactivate event is partially cancelable. It is not cancelable for editable elements and cancelable for others.

If you want to prevent a non-editable element from getting the focus in Internet Explorer, cancel the onbeforeactivate event. For a cross-browser solution and an arbitrary element, set the disabled property of the element to true. See the examples for details.

The order of events related to the onbeforeactivate event:

Action	Event order
Any action that invokes the onbeforeactivate event.	onbeforeeditfocus (only for editable elements) onbeforeactivate onactivate onfocusin onfocus

Example HTML code 1:

This example cancels the onbeforeactivate event for a button element in Internet Explorer. For a cross-browser solution, please see the next example.:

<head>
    <script type="text/javascript">
        function CancelActivation (event) {
                // prevent the propagation of the current event
            if (event.stopPropagation) {
                event.stopPropagation ();
            }
            else {
                event.cancelBubble = true;
            }
                // cancel the current event
            return false;
        }
    </script>
</head>
<body>
    The second button cannot be activated by the user.<br />
    Try to click on it or use the TAB key to navigate through the buttons or press the ALT+2 access key!
    <br /><br />
    <button accesskey="1">ALT + 1</button>
    <button accesskey="2" onbeforeactivate="return CancelActivation (event);">ALT + 2</button>
    <button accesskey="3">ALT + 3</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution for the previous one:

The second button cannot be activated by the user.<br />
Try to click on it or use the TAB key to navigate through the buttons or press the ALT+2 access key!
<br /><br />
<button accesskey="1">ALT + 1</button>
<button accesskey="2" disabled="disabled">ALT + 2</button>
<button accesskey="3">ALT + 3</button>