Mouse event capture failing in Firefox?

I'm trying to make this thing work in Firefox, because I know the client my game is on is pondering switching to Gecko (they're currently using something very similar to IE4 for browser windows launched in the client). This tooltip script works fine in IE, and the coordinates are apparently being read and changed in Firefox (I tossed in a div for debug), but I keep getting an "ev has no properties" error in Firefox and the tooltip div fails to appear.

Following is the entirety of the document I'm working on:

re: Mouse event capture failing in Firefox?

You need to have something link realign_tooltip(event) as a method call instead of realign_tooltip(); You are not passing any event to the function for Firefox to get data from.

re: Mouse event capture failing in Firefox?

Hi Mobius,

These are some things that I've wanted to say in response to a lot of different people's questions.

When you get an error like this, start using 'alerts' and look at the values of certain variables. realign_tooltip expects ev to be an event object, but adding "alert(ev);" as the first line in realign_tooltip shows that ev is not an event object - it is 'undefined'. So we look to see from where the function is called 'from' and we see that it is called from show_tooltip and no arguments are passed. show_tooltip is the function which we call the event handler (or 'listener') because it is called directly by the system when the event occurs. So show_tooltip needs to pass the event object to realign_tooltip. How does show_tooltip receive the event object? In IE (DOM0) you use 'window.event'. In DOM2 browsers the event object is passed as an argument to the event listener.

There are many general patterns and 'best practices' we can use when developing our applications. I will discuss a few of them in the following.

1. No Javascript in HTML.

For example, we want this:
to look more like this:
of course we might like to put tooltips on 'any' element:

2. No HTML in Javascript.

For example, the HTML in this string:
should be in the HTML:
I would not use a table but that's a personal choice.


3. Register event listeners in script instead of HTML attributes.

Elements are not available to script (as we say 'in the DOM') until after the 'onload' event. So let's register an onload listener and do all our initialization there (much more could be said about 'onload' techniques).

3. Using ID and CLASS for script access to elements.

Using ID and CLASS are not the only ways to access elements and this suggestion is more specific to the tooltip app.

Notice in the above HTML how I've used ID and CLASS attributes. I used ID where there could be only one of that type of object, and I used CLASS where there could be more than one.

I'm using class 'tt1' to associate any element with a specific tooltip. Class 'tt2' is a different tooltip, etc.

Let's store the tooltip titles and text in arrays:
Now let's finish the initialization function. We want to find all elements that have classes 'tt1', 'tt2', 'tt3', etc. and for each element we will register mouseover and mouseout listeners. Also, for each element we will add a new property 'tooltipIndex' which is an index into the tt_title and tt_content arrays. Note that there could be any number of elements with class 'tt1' - and likewise for 'tt2' etc.

I'm going to use my function xGetElementsByClassName but you can use anyone's version of this. As long as it returns an array of elements, all of which have a certain className.