IE7 preliminary bug report: the onclick event-handler

In Internet Explorer 7 (final release, build 7.0.5730.11), we cannot, using Javascript, cancel the browser’s default action for an anchor element by setting this element’s onclick event-handler to false. One way to solve the problem is to remove the href attribute, yet let the cursor that hovers over the element remain pointy (i.e. keep the white hand with the pointing forefinger), using CSS.

The default action of the browser for an anchor element is this: when the “user” clicks on the content of the <a> tag, the browser attempts to retrieve and display the document which URL is indicated by the href attribute, and unless a target attribute says otherwise, the document or fragment is loaded in the same window. We use “return false” to cancel that default action (i.e., the follow link action) in the anchor onclick even-handler function:

myLink.onclick = function() {
  /* some action */
  return false;
}

That “return false” does not work as expected in IE7: the browser still follows the link specified by the href attribute, after it has executed the code that precedes the statement “return false”.

Let us consider the following XHTML markup:

We must register our event-handlers when the web page is loaded, that is, when the Document Object Model tree is built. In our example, we’ll use a function called registerEventHandlers() — an entirely arbitrary name:

window.onload = registerEventHandlers;

In this function’s definition, we’ll do three things:

1. First, we’ll add the anchor element to a class. Our goal is to change the aspect of the cursor when it hovers over the anchor element. The CSS rule would be, as defined in our stylesheet:

   .clickable {
     cursor: pointer;
   } /* Rule for the class clickable */

   In registerEventHandlers(), we’ll either set the DOM Level 0 property className, or we’ll go “the long way that works all the time in all modern browsers, and that is W3C-approved:

   var myLink = document.getElementById("myLink");
   var classAttr = myLink.getAttributeNode("class");
   if (classAttr) {
     classAttr.nodeValue += " clickable";
   }
   else { 
     var newAttr = document.createAttribute("class");
     newAttr.nodeValue = "clickable";
     myLink.setAttributeNode(newAttr);
   }

2. Secondly, we’ll get rid of the href attribute — that is, if we don’t want the browser to follow the link in the usual way after it’s done executing all code assigned to onclick. Since we may need to use the value of this attribute later on, we’ll record it first. Given that the variable url is declared outside the function registerEventHandlers():

   url = myLink.getAttributeNode("href").nodeValue;
   myLink.removeAttributeNode(myLink.getAttributeNode("href"));

   Note that we could have used the method removeAttribute("href") instead ; there are many ways to skin a cat.

   Update : we may remove the attribute node now, or we may remove it later, in the event-handler function.

3. Finally, we’ll register the onclick event-handler for the anchor element (i.e. the node myLink):

   myLink.onclick = doThis;

That function name, doThis, needs to be more descriptive. What could doThis() do ? For example, it could tell the browser to load in a new window the web page that was referenced by the href attribute we just got rid of:

function doThis() {
  window.open(url, "pop_up");
  /* return false; 
  // This does not prevent the browser’s default action in IE7.*/
}

Update: if we have decided to remove the href attribute node in the event-handler function, we use the keyword “this” to refer to the anchor element:

function doThis() {
  window.open(url, "pop_up");
  this.removeAttributeNode(this.getAttributeNode("href")); 
  /* return false; 
  // This does not prevent the browser’s default action in IE7.*/
}

Please, do not hesitate to comment on this article. Do you have a question? Would you like to propose a correction or improvement? Perhaps you have something to say about IE7? Thank you in advance!

$(document).ready(function() {
  $('a').click(function() {
    window.open($(this).attr('href'), 'new_window');
    return false;
  });
});