Prevent the Default Action for an Event

There are many occasions when you have to override the default action of an event. For example, when a link is clicked, you want a popup to open(desired action) rather than going to the the page in the href attribute(default action). I will try to find the best way to do this.

Get the function...

Uses

This is most used in occasions like..

Solutions

No Default Action

Generally, people avoid this problem by using a event without a default action. Let us take the example of opening a popup...

<a href="javascript:openPopup('popup.html')">Open Popup</a>

Open Popup Demo

This is by the easiest solution - but we cannot use this methods because of the reasons outlined in another article about the best ways to open a popup.

return false

A better solution is...

<script>
function openPopup(url) {
	window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
}
</script>
...
<a href="popup.html" onclick="openPopup(this.href);">Open Popup</a>

Open Popup Demo

But now the default action takes place along with the desired action - the popup opens - but the user is taken to the 'popup.html' page. We solve that problem like this...

<script>
function openPopup(url) {
	window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
	return false;
}
</script>
...
<a href="popup.html" onclick="return openPopup(this.href);">Open Popup</a>

Open Popup Demo

This will give us the desired result - but there is one problem - this approach demands the inclusion of behavior element(javascript), ie. onclick="..." inside the content of the page. We should try to separate these two layers.

<script>
function openPopup() {
	var url = this.href;
	window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
	return false;
}

window.onload = function() {
	document.getElementById("popup").onclick=openPopup;
}
</script>
...
<a href="popup.html" id="popup">Open Popup</a>
Open Popup Demo

returnValue and preventDefault() methods

That does what we need - but we cannot relay on the return false method for preventing the default action. Giving this code will exit the function - so if there is more to do in the function, this code cannot be used. In most of the situations I encounter, return false is enough, but in some areas, we need something more drastic.

<script>
function openPopup(e) {
	if(!e) var e = window.event;
	var url = this.href;
	window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
	
	//e.cancelBubble is supported by IE - this will kill the bubbling process.
	e.cancelBubble = true;
	e.returnValue = false;

	//e.stopPropagation works only in Firefox.
	if (e.stopPropagation) {
		e.stopPropagation();
		e.preventDefault();
	}
}

window.onload = function() {
	document.getElementById("popup").onclick=openPopup;
}
</script>
...
<a href="popup.html" id="popup">Open Popup</a>
Open Popup Demo

Explanation

To understand what is happening in this code, you must have a clear understanding about events in JavaScript. Lets see what the code does...

function openPopup(e) {
	if(!e) var e = window.event;

We get the details of the event in a variable called 'e'. Using the above method will ensure that we get the event information in most of the modern browsers.

	var url = this.href;
	window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");

Opens the popup. Now for the event prevention code.

Internet Explorer

	//e.cancelBubble is supported by IE - this will kill the bubbling process.
	e.cancelBubble = true;

This will cancel the bubbling process. So no further actions will take place due to this event.

	e.returnValue = false;

Remember the return false method of preventing the action? This is another way of doing the same thing - but without exiting the function. This is the important line - this is what will prevent the default action. The last line does no do this - even if we remove the last line, the script will work as expected - but this line is a must.

Firefox/Other Browsers

	//e.stopPropagation works only in Firefox.
	if (e.stopPropagation) {

First use object detection to see wether the user is using Firefox - as Internet Explorer don't support the e.stopPropagation() function. So only Firefox browsers will execute the code in the if condition.

		e.stopPropagation();

Stop the capturing process(reverse of the bubbling process).

		e.preventDefault();

Prevents the default action from taking place. This is function that does the trick in Firefox - not the last line - that will only stop the capture process - not prevent the default action.

	}
}

End the if condition and the function - why do I need to explain this to you?

The function

For ease of use, I will create a function called stopEvent()...

function stopEvent(e) {
	if(!e) var e = window.event;
	
	//e.cancelBubble is supported by IE - this will kill the bubbling process.
	e.cancelBubble = true;
	e.returnValue = false;

	//e.stopPropagation works only in Firefox.
	if (e.stopPropagation) {
		e.stopPropagation();
		e.preventDefault();
	}
	return false;
}
blog comments powered by Disqus