[Javascript] Comparing objects

[Bill Moseley]

On Tue, May 16, 2006 at 03:31:07PM -0400, Matt Warden wrote:
> On 5/16/06, Bill Moseley <moseley at hank.org> wrote:
> >When I mouseover I need to test if I'm over an already open menu, and
> >just ignore that event.
> >
> >    if ( this == current_open )
> >        return;
> 
> I believe all events in IE are fired in the window scope,so this ==
> window.

Ah, yes.  Thanks.

I'm reasonably new to Javascript, so I suspect I'm doing something
wrong.   I've tried to give full details below -- I hope it's not too
much to wade through and doesn't scare too many off. ;)

So, IE is giving me trouble.  Events don't seem to propagate up so
some mouseovers are not seen.  That is, I have my mouseover events on
<td>, but IE doesn't *always* seem to propagate the event when I mouse over
the inner <a>.


I'm using a single row table for my menu bar (I have my reasons ;) and
the markup looks like this for one menu item:

    <td class="popup">
        <dl>
            <dt>
                <a href="#">Menu text</a>
            <dt>
            <!-- sub-menu -->
            <dd>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                </ul>
            </dd>
        </dl>
    </td>

Adding "over" to the <td> class will display the menu (by css rules):

    <td class="popup over">



There are multiple <td> elements -- one for each menu/sub-menu pair.
I have mouseover events assigned on all the <td> elements, as you can
see below.



In Firefox when I mouse over the "Menu text" I get events for both
the <td> and the <a>.  I ignore all except the <td> events.

But in IE often times I only get a mouseover event on the <a>, not
the <td>.  It depends on how careful I am at moving the mouse over
the element.

This script below is run onload, and it first adds "open" to the
first "popup" td so the first menu is open on page load.

Then it assigns mouseover events to all the td.popup elements.
Again, the mouseover events close the currently open menu, and then
opens the menu on the element that triggered the event.


    /* Find all td.popup */
    var popups = getElementsByClassName(document, 'td', 'popup' );


    /* Show first menu on page load */
    current_open = popups[0];  /* current_open is a global */

    if ( current_open )
        current_open.className += ' over';



    /* Defined function to run on mouseover on td.popup elements */

    var close_menu = function (e) {

        if ( !e ) e = event;

        /* Get the source element that triggered event */
        var element = e.target || e.srcElement;

        debug( 'element = ' + element.nodeName );

        if ( !element || element.nodeName != 'TD' ) {
            error('Not <td>: skipping ' + element.nodeName );
            return;
        }


        /* Ignore if mouseover already open menu */

        if ( element == current_open ) {
            error('skipping already open ' + element.nodeName );
            return;
        }

        /* Close "current_open" menu */
        current_open.className = current_open.className.replace(' over','');

        current_open = element; /* Remember which <td> is open */

        element.className += ' over';  /* Open menu that triggered mouseover */


    }

    /* Add above function to all td.popups mouseover events */

    for ( var i = 0; i < popups.length; i++ )
        addEvent( popups[i], 'mouseover', close_menu, 'false' );







-- 
Bill Moseley
moseley at hank.org