event.stopImmediatePropagation(); works in all browser except Firefox

Question

I have a jQuery code used to create an image carousel. I know this is not the most elegant piece of code.

jQuery(function(){
$(".project").css('max-height','180px'); //180px
var expanded = 0;
var position = 0;
x = 0;


$(".project").click(function(){
    if (expanded == 0){
        $(this).css('max-height','320px');
        expanded = 1;
        $(this).find('.projectcarousel').find('.control').fadeIn(300);
        $(this).find('.projectcarousel').find('.control').css('display','block');
        $(this).find('.projectdescription').find('.tags').fadeIn(500);
        $(this).css('opacity','1');
    }
    else if (expanded == 1){
        $(this).css('max-height','180px');
        $(this).find('.projectcarousel').find('.control').fadeOut(300);
        $(this).find('.projectdescription').find('.tags').fadeOut(500);
        $(this).find('.viewscreen').find('.carousel').css('-moz-transform','translate(0,0)');
        $(this).find('.viewscreen').find('.carousel').css('-webkit-transform','translate(0,0)');
        $(this).find('.viewscreen').find('.carousel').css('-o-transform','translate(0,0)');
        $(this).find('.viewscreen').find('.carousel').css('transform','translate(0,0)');
        expanded = 0;
        position = 0;
        x = 0;
    }
});

$('.prev').click(function(){
    event.stopImmediatePropagation();

    switch(position){
        case 0:
            x = "-420px"
            position = 1;
            break;

        case 1:
            x = "-840px"
            position = 2;
            break;

        case 2:
            x = "-1260px"
            position = 3;
            break;

        case 3:
            x = "-1680px"
            position = 4;
            break;

        default:
            x = 0;
            position = 0;
    }

    $(this).parent().parent().next().find('.carousel').css('-moz-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('-webkit-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('-o-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('transform','translate('+x+',0)');
 });

$('.next').click(function(){
    event.stopImmediatePropagation();

    switch(position){

        case 0:
            x = "-1680px"
            position = 4;
            break;

        case 1:
            x = "0px"
            position = 0;
            break;

        case 2:
            x = "-420px"
            position = 1;
            break;

        case 3:
            x = "-840px"
            position = 2;
            break;

        case 4:
            x = "-1260px"
            position = 3;
            break;

        default:
            x = 0;
            position = 0;
    }

    $(this).parent().parent().next().find('.carousel').css('-moz-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('-webkit-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('-o-transform','translate('+x+',0)');
    $(this).parent().parent().next().find('.carousel').css('transform','translate('+x+',0)');
 });
});

The event.stopImmediatePropagation(); is working on Chrome, Opera, and Safari, but is not working in Firefox. I've tried using event.stopPropagation() and event.preventDefault(); but both codes doesn't work.

The error I got from Firefox is 'Use of getPreventDefault() is deprecated. Use defaultPrevented instead' and 'ReferenceError: event is not defined'.

Am I using the code in a wrong way or is there a bug in Firefox that I should be aware of?

Answer 1

Use jQuery's normalised event object, which is passed as the first argument to your callback function, for all of your jQuery event handlers:

$('.next').click(function(e){ // added the 'e' parameter
    e.stopImmediatePropagation(); // uses jQuery's event object, referenced by e

Note that I've named it e but you can call it pretty much anything you like, provided it's a valid JavaScript identifier. I choose e because it's short (only one character), relatively explicit (I know it refers to an object that represents an event), and it's unlikely that I'll be shadowing any other variables that have the same name.