WEB STANDARDS CREATIVITY

228
if (typeof event.stopPropagation != "undefined")
{
event.stopPropagation();
}
else
{
event.cancelBubble = true;
}
return true;
};
This short function is mainly about getting around browser differences in event handling. The first conditional checks whether an
event object was passed to the function itself. This is normally done automatically by the event listener, but that doesn’t happen
with Internet Explorer 5.x. If the event object doesn’t exist, we default to window.event, which is what Internet Explorer 5.x uses.
Next, we check whether the event object method stopPropagation() exists. This is the W3C standard method for stopping an
event from bubbling upwards (that is, stopping the mousedown event on the anchor from also registering on the h2). If stop-
Propagation() exists, we call it. However, Internet Explorer uses a proprietary property of the event object called cancelBubble
to stop event bubbling. If stopPropagation() doesn’t exist, we set event.cancelBubble to true, and this has the same effect.
Now we need to deal with the click event. You might have noticed that to add the mousedown event listener to the anchor,
we used the abstracting function from the resolution-dependent layout, attachEventListener(), but for the click event, we
actually use one of the old event handlers, the onclick property. Because Safari doesn’t allow us to stop the default action
of click events added using the W3C event listeners, we need to revert to the dot property. In practice, this shouldn’t cause
much of a problem. We’re adding the event handler to an element created by our own script, so it shouldn’t have any other
event information attached to it that might conflict.
The function that the click event handler points to is clickExpandCollapse():
function clickExpandCollapse()
{
if (!hasClass(this.parentNode.parentNode, "collapsed"))
{
addClass(this.parentNode.parentNode, "collapsed");
}
else
{
removeClass(this.parentNode.parentNode, "collapsed");
}
return false;
};
This does a simple toggle of the class on the div that surrounds the h2. If that div doesn’t have a class of collapsed, we add
the class. If it does have a class of collapsed, we remove the class. This makes it easy to style the different views of a collapsed
and expanded module purely through the CSS.
When dealing with element classes in clickExpandCollapse(), we always use these custom functions: hasClass(),
addClass(), and removeClass(). These make it easier to work with multiple classnames on the same element. I’ve included
the functions in their own library file, class_names.js, so they can easily be included in other projects:
function hasClass(target, classValue)
{
var pattern = new RegExp("(^| )" + classValue + "( |$)");