CODEWITHSUNDEEP
jqueryevent-propagation
circey
circey

Reputation: 2042

problem with event propagation in FireFox

I'm using the following code to prevent event propagation:

function mapSlider(e) {
if ($('.slideme').hasClass('open')) {
        $('.slideme').animate({left:0,},'slow').removeClass('open');
        $('.opened').hide();
        $('.closed').show();
        } else {
        $('.slideme').animate({left:-710,},'slow').addClass('open');
        $('.opened').show();
        $('.closed').hide();
        }
        return(false);

        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();
        e.preventDefault();
        e.stopImmediatePropagation();
}

It's working in Chrome and Safari but not Opera or Firefox (haven't even attempted IE yet!). FF firebug says 'e' is undefined. I'm nowhere near being a jquery guru and I don't understand why e is undefined, but is it really? I thought var e is defining it?

And how do I go about fixing it?

Apologies for stupid questions - I'm self-taught and pick things up as I go.

MTIA

Upvotes: 1

Views: 2848

Answers (2)

Felix Kling
Felix Kling

Reputation: 816472

jQuery unifies all these browser differences. You just have to do:

function mapSlider(e) {
    if ($('.slideme').hasClass('open')) {
        $('.slideme').animate({left:0,},'slow').removeClass('open');
        $('.opened').hide();
        $('.closed').show();
    } else {
        $('.slideme').animate({left:-710,},'slow').addClass('open');
        $('.opened').show();
        $('.closed').hide();
    }
    e.stopPropagation();
    e.preventDefault();
}

In your example, the code at the bottom would never be executed anyway, as you do a return false; before.

Now it just depends on how this function is called. If you assign it properly as an event handler, then the event object is automatically passed.

Update:

In your code, you are not passing the event object to your handler. You have to do:

<div id="map-box" class="slideme" onClick="mapSlider(event)">

but I think this does not work in IE.

So it is better to do it the jQuery way:

$(function() {
    $('#map-box').click(mapSlider);
});

The jQuery documentation is pretty good, I recommend reading it. Especially in this case about the Event object.

Also have a look at this tutorial.

Upvotes: 4

herostwist
herostwist

Reputation: 3958

No code after return false will be executed. move return false to the last line of your function.

Upvotes: 0

Related Questions