[thelist] Javascript : cancel bubble with Safari

Bill Moseley moseley at hank.org
Wed Feb 15 16:31:18 CST 2006


On Tue, Feb 14, 2006 at 07:00:44AM +0000, Christian Heilmann wrote:
> > This seems to work on Firefox and IE, but in Safari the links just
> > don't work, and only the onclick on the <tr> works.
> 
> It is a Safari problem, it doesn't quite get the event bubbling. That
> is why you normally use addEvent and add an extra DOM1 onclick for
> Safari.
> 
> boxnav.addEvent(lis[i],'click',boxnav.navigate,false);
> lis[i].onclick=function(){return false;} // Safari

I'm not really following.  Seems like I'd need to return true
(assuming that's the last event to fire) so that the href is followed.


As a javascript neophyte, could I ask for a bit more help
understanding this?  Sorry if I error on the side of too much detail.  ;)


So, here's my html:

    <tr onclick="window.location.href='http://localhost/foo/119'">
        <td>
            <a href="http://localhost/foo/119" >Some text</a><br />
            Some other text
        </td>
    </tr>


This is what I had before where Safari didn't work.


I'm using Behaviour to assign an onclick event to stop
the bubble.  I'm using the "traditional" method of assigning an
event so the events should fire in the bubbling phase.

So with Behaviour I was doing:

    '#matrix td a' : function(e){
        e.onclick   = function(e){
            if (!e) var e = window.event;
            e.cancelBubble = true;
            if (e.stopPropagation) e.stopPropagation();
            return true;
        }
    }


Behaviour finds elements by selector and then assigns the event by
calling that anonymous function above (thus assigning the onclick the
anonymous function.

So, what's Safari doing differently?  I click on the <a> link, and I
want only that event to fire.  The <a> has been assigned (via
Behaviour) an onclick event which is suppose to cancel the bubble --
that is, stop it from running the onclick on the <tr>.  The onclick
returns true so I expect the href to be followed.


Now, based on your suggestion I'm now doing this, which *does* work
in Safari:


    function stop_bubble(e) {
        if ( !e ) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        alert('stop_bubble');
        return true;
    }

    Behaviour.register( {
        '#matrix td a' : function(e){
            addEvent(e, 'click', stop_bubble, false );

            e.onclick = function() { return true; }
        }
    } );


So is it just a bug in Safari, and there's no way to explain why my
original was not working?  Or is there something I'm just not
understanding?


Also, I would think the onclick event should return true.  But it
seems like if I do *not* include:

    e.onclick = function() { return true; }

The href is still followed.  Is that just by chance that it's working
without returning true?




Thanks,



-- 
Bill Moseley
moseley at hank.org




More information about the thelist mailing list