Help with browser compatibility issue - clickHandler() in DOM2

[MusicMan]

Greetings,

I recently discovered that some JS code used in some important support pages which work fine with IE do not work in browsers such as Netscape 7.2 and Firefox (any Mozilla browser?). A JS console message indicates "window.event" has no properties. Apparently there is no window.event in the DOM2 event model use by those browsers. I inherited this code and am not well-versed in JS, so I'm not real clear on what I need to do. Is there a JS pro out there that can help me out?

The page emulates an explorer-like function, with a line of text and a plus box to the left that can be clicked to reveal the details of the item. The plus box becomes a minus box which can be clicked to hide the details - basically a toggle function.

The HTML tags look like this:

<img src="./images/plus.gif" ID="M1" Class="Outline" Style="cursor:hand" width=11 height=11>&nbsp;<b>Specifications</b>
...[table stuff]...
<div ID="M1d" Style="display:none"><ul>......</ul>

...and the javascript in the page is as follows:


function clickHandler() {

var targetId, srcElement, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline") {

targetId = srcElement.id + "d";
targetElement = document.all(targetId);
if (targetElement.style.display == "none") {

targetElement.style.display = "";
srcElement.src = "images/minus.gif";

} else {

targetElement.style.display = "none";
srcElement.src = "images/plus.gif";

}

}

}
document.onclick = clickHandler;


Firefiox, NS7.2, etc. just do nothing at all when the plus icon is clicked, only IE works. Any help would be appreciated. Thanks.

[MusicMan]

Nevermind - I've dealt with it. I just threw out that JS code completely and created a solution using CSS instead.

[scrupul0us]

what was your CSS solution?

[Kor]

window.event is an event model specific to IE. For crossbrowser solutions see also

here

By short, the crossbrowser solution could be something like

PHP Code:

var myElem;
function captureEvent(e){
if (!e) {myElem=event.srcElement}//if IE and compatible
else{myElem=e.target}//if Moz and compatible (DOM rec)
.....
.....
} 


[MusicMan]

I guess its part CSS, part JS. I used the CSS display property along with an id selector inside a div tag. Then two little JS functions just set document.getElementByID("id").style.display to either "none" or "block". Works great!