1. Technology
Send to a Friend via Email

Disabling the Default Action

Join the Discussion

Questions? Comments?

There are a number of HTML tags which have an action that they perform without any Javascript processing being required. For example links in a web page will automatically open the new page that they are linked via their href attribute to when someone selects them and all the fields in a form (except those that are disabled) will be automatically passed to the processing referenced by the action attribute of the form tag when the form is submitted.

When you add Javascript processing to parts of your HTML that have in built processing like this there may be occasions where you do not want these default actions to take place. Let's look at a couple of examples where we add our own event handler to some HTML that has a default action and look at how we can code our Javascript so as to stop that default action from occurring when it is not required. To keep things simple I will show the event handlers inline in the HTML but the same applies when you separate the Javascript and HTML into separate files (it is just not so visible as to what is happening when you do that). As a first example let's look at a link that we want to open in a new window.

< a href="nextpage.htm" target="_blank"
onclick="window.open(this.href,'_blank','width=200,height=200');return false;">

Where this code runs in a browser with Javascript disabled the onclick processing is ignored and the link opens the new page in a new window without having any control of the size of the new window. If Javascript is available then the onclick event handler runs first and the Javascript window.open command opens the new window with the size specified.If that were the only statement within the onclick then the default action of the link would then be run fresulting in a second copy of the window being opened. To stop this happening we return false from the onclick event handler which tells the browser that the default action is not to be performed.

For our second example we will consider the situation where you use Javascript to validate a form before submitting it to the default processing. In this instance we want to selectively disable the default action if the Javascript determines that the form content is invalid. To do this we set up our form validation function so that it returns false whenever it finds anything in the form that is invalid and returns true if all of the validation processing passes and the form is acceptable to be submitted. We then attach the validation function into the form tag of our form like this:

<form action="process.php"
onsubmit="return validate(this)">

This ensures that the true or false value returned from the validate function is in turn returned to the onsubmit event handler in order to allow it to determine whether or not the form should in fact be passed to the action script.

If we are separating our HTML and Javascript into separate files then the means of disabling the default action is slightly more complicated. Instead of just returning false to disable the default event we instead need to call the preventDefault() method of the event handler (for those browsers that recognise standard event listeners) and set the eventReturnValue property to false for Internet Explorer (which uses its own proprietary means of attaching events). The simplest way to do this is to set up a single function that will perform whichever of the two that the browser recognises and then call that function from whereever we would otherwise have coded a "return false" statement. Our function can be coded like this:

function stopDef(e) {
if (e &&e.preventDefault) e.preventDefault();
else if (window.event && window.event.returnValue)
window.eventReturnValue = false;
}

A simple call to stopDef() passing the reference to the current event handler as a parameter will then disable any default action that the HTML will have otherwise performed.

©2014 About.com. All rights reserved.