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.
Uses
This is most used in occasions like..
- Opening a popup
- Validating a form
- Confirming a delete
- And More
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>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>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>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>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>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;
}