Why Doesn't Javascript DOM 2 "Click" Event Work - javascript-events

Question

My question is, Why doesn't the click event work when other events do work using the same code? Consider the following code examples from http://www.pricelearman.com/__dev (2 underscores)
For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
For Square 3 using "mouseover" event
function showAboutPane() {
var aboutID = document.getElementById("aboutID");
aboutID.addEventListener("mouseover", showAboutPaneHandler, false);
}
function showAboutPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("aboutPane");
v.style.display = "block";
}
Rolling-Over the link "ABOUT" shows the aboutPane hover effect as expected
For Square 4 using "mousedown" event
function showConnectPane() {
var connectID = document.getElementById("connectID");
connectID.addEventListener("mousedown", showConnectPaneHandler, false);
}
function showConnectPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("connectPane");
v.style.display = "block";
}
Holding mouse down on the link "CONNECT" shows the connectPane as expected
What am I missing about the click event. It's counterintuitive to me that it would not follow the same pattern as the other mouse events.
I'm trying to preclude interference from the link's default action by using e.preventDefault();
I know a click event is a sequence of simple events: mousedown,mouseup,click.
Is there something blocking this sequence?
The full code can be reviewed at http://www.pricelearman.com/__dev (2 underscores). The code may not be optimum, but it is functionally correct – binding is accomplished and functions are called, etc – else the above code would not be working at all.
Thanks for your time and expertise. This is a vexing question to me. It seems so fundamental and simple. I'm new to javascript and I must be missing something.

Answer 1

For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
Well what I currently can find at http://www.pricelearman.com/__dev/_js/main.js is
// Show work navigation
function showWorkPane() {
var workID = document.getElementById("workID");
workID.addEventListener("mouseover", showWorkPaneHandler, false);
// ^^^^^^^^^
}
function showWorkPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("workPane");
v.style.display = "block";
}
Looks quite obvious to me why click events show no effect. There are none bound.