How To Cancel Event Handlers in JavaScript

Along with registering event handlers in JavaScript, you can remove or cancel event handlers using some standard methods. The different methods for handling events if it is set as a property on the object or document element or set as using standard methods addEventListner() and attachEvent() using return value false or using removeEventListner() for addEventListner() and detachEvent() method for attachEvent().

How to Cancel Event Handlers as Property in JavaScript

If an event handler is registered as a property on the object or document element, a return value of false tells the browser that it should not perform the default action associated with the event. For example, the onclick handler of a submit button in a form can return false to prevent the browser from submitting the form.

A browser has its own “default” behavior for certain events. If you click a link, you will be taken to the link’s target. When you press the down arrow, the browser will scroll the page down. If you right-click, you’ll get a context menu, and so on. If you want to cancel the default event when the browser is about to navigate to a new page, you can trigger the return value of the onbeforeunload handler of the window object as given below.

JavaScript Code:

<script>
var b=document.getElementById("link1")
b.onclick = function(event) {
event = event || window.event
return false;
}
</script>

HTML Code:

<a id="link1" href="/">Click me</a>

Preview:

With the use of return false method, you can cancel the default event when the browser is about to navigate to a linked page.

Go To Homepage

How to Cancel Event Handler Attributes in HTML

The event handler properties of a document element can also cancel as attributes on the corresponding HTML tag. If you do this, the attribute value should be a string of JavaScript code. That code should be the body of the event handler function.

Example:

Here is an example of canceling event handler attributes in HTML where HTML event handler attribute contains JavaScript statements.

HTML Code:

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

Preview:

Here the default event when the browser is about to navigate to a linked page is canceled using return false method.

Go to Homepage

How to Cancel Event Handler for Method Invocation

If event handlers registered with addEventListner() or attachEvent() must call the preventDefault() method. Or it should set the returnValue property of the event object. In browsers that support addEventListner(), you can cancel the default action for an event by invoking the preventDefault() method of the event object. For all versions of IE before IE9, you can do the same by setting the returnValue property of the event object or false. Here is an example to show the uses of preventDefault() method and returnValue property to cancel the default event handler.

JavaScript Code:

<script>
var c=document.getElementById("link2")
c.onclick = function(event) {
event = event || window.event
if (event.preventDefault){
event.preventDefault()
}
else {
event.returnValue = false
}}
</scirpt>

HTML Code:

<a id="link2" href="/">Click me</a>

Preview:

Here the default event when the browser is about to navigate to a linked page. It is canceled using preventDefault() method and for IE less than IE9 event.returnValue method is used.

Go to Homepage

How to Cancel Propagation of Events

Event handlers registered on nodes with children will also receive some events that happen in the children. If a button inside a paragraph is clicked, event handlers on the paragraph will also receive the click event. But if both the paragraph and the button have a handler, the more specific handler—the one on the button—gets to go first. The event is said to propagate outward, from the node where it happened to that node’s parent node and on to the root of the document.

Canceling the default action associated with an event is only one kind of event cancellation. If you want to cancel propagation of events can use stopPropagation() method for registered with addEventListner() method. It can prevent the continued propagation of the event. You can call the stopPropagation() method at any time during event propagation. It works during the capturing phase, at the event target itself and during the bubbling phase

JavaScript Code:

<script>
var d=document.getElementById("link3")
function stop(e) {
e.preventDefault()
e.stopPropagation()
return false
}
d.addEventListener('click', stop, false)
</script>

HTML Code:

 <a id="link3" href="/">Click me</a> 

Preview:

Here the propagation of event when the browser is about to navigate to a linked page. You can use stopPropagation() method to cancel the propagation of the event and preventDefault() method to return the false method.

Go to Homepage