How To Cancel Event Handlers in JavaScript

Along with registering event handlers in JavaScript, you can cancel or remove them 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 Handler as Properties in JavaScript


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

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

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 for cancelling 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 cancelled using return false method
Click me

How to Cancel Event Handler for Method Invocation


If event handlers registered with addEventListner() or attachEvent() must call the preventDefault() method or 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 is cancelled using preventDefault() method and for IE less then IE9 event.return Value method is used.
Click me

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, which can prevent the continued propagation of event. The stopPropagation() method can be called 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 is cancelled using stopPropagation() method and default event is cancelled using preventDefault() and return false method.
Click me