DOM equivalent of window.event.srcElement;

[prowsej]

My page: http://members.home.net/prowsej does not work in Mozilla (specifically, K-Meleon)

Apparently this is because my JavaScript code does nto conform to the DOM. How am I to change the following code to be compatible with Netscape (it always has and continues to work in IE). I have highlighted the two sections that I belive there will be an issue with. Thanks!

<script type="text/javascript">
function clickHandler() {
var targetId, srcElement, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline") {
targetId = srcElement.id + "details";
targetElement = document.all(targetId);
if (targetElement.style.display == "none") {
targetElement.style.display = "";
} else {
targetElement.style.display = "none";
}
}
}

document.onclick = clickHandler;
</script>

[Arielladog]

Hey prowsej,

I didn't really look at your page, but from your code snippet, I think I know what you need. In DOM, the equivelent is event.target. But unlike IE's event.srcElement, it also returns text, so we can check to make sure it's not text that we're retrieving (if it is, then we take it's parent). Here's what you code should look like:

<script type="text/javascript"> 
function clickHandler(e) { 
var targetId, srcElement, targetElement;
if(document.getElementById && !document.all){
if(e.target.nodeName=="#text"){
srcElement = e.target.parentNode;
}else{
srcElement = e.target;
}
}else if(document.all){
srcElement = window.event.srcElement;
}
if (srcElement.className == "Outline") { 
targetId = srcElement.id + "details"; 
targetElement = (document.getElementById)?document.getElementById(targetID):document.all[targetId]; 
if (targetElement.style.display == "none") { 
targetElement.style.display = ""; 
} else { 
targetElement.style.display = "none"; 
} 
} 
} 

document.onclick = clickHandler; 
</script>

aDog

[Anarchos]

Of course that won't work for NS 4.x, check out http://www.dansteinman.com/dynduo for info on supporting IE and NS.

[Arielladog]

Hey,

Anarchos is right about it not working for NN 4. I've written a proposed article on dHTML/DOM subject for sitepoint. Included in that article is this topic. However, I'll include the code I use for the tutorial for NN 4. Hopefully you can figure it out:

            }else if(document.layers){
                  var mouseX = e.pageX, mouseY = e.pageY;
                  for (i=0;i<document.layers.length;i++){
                        el = document.layers[i];


                        if (mouseX>parseInt(el.left) && mouseX<parseInt(el.left+el.clip.width) && mouseY>parseInt(el.top) && mouseY<parseInt(el.top+el.clip.height)){


                              layerID = document.layers[i].id.toString();
                              break;
                        }
                  }
            }

aDog

[prowsej]

Arielladog, thanks for the code.

Basically, if I want that code to work in both IE5 and Netscape6 you're saying that I have to include clumsy if/else statements for each browser? That's really clunky and there' got to be a better way to get the same code to work on both.

Microsoft says that their JScript conforms to the standard. Of course Netscape's implementation will conform to the standard. Why can't I write the code once if they're both standards compliant?

I also don't understand one part of your code - what am I supposed to pass through to the script, what is 'e' supposed to be? Since I'm calling the script whenever an onClick event occurs what am I supposed to include?