event.stopImmediatePropagation(); 适用于除Firefox以外的所有浏览器

Question

我有一个用于创建图像轮播的jQuery代码.我知道这不是最优雅的代码.

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)');
 });
});

该event.stopImmediatePropagation();工作在Chrome,Opera和Safari,但不能在Firefox工作.我已经尝试使用event.stopPropagation()和event.preventDefault();,但双方码不起作用.

我从Firefox获得的错误是"不使用getPreventDefault()".使用defaultPrevented代替'和'ReferenceError:未定义事件'.

我是以错误的方式使用代码还是我应该注意Firefox中的错误？

Answer 1

对于所有jQuery事件处理程序,使用jQuery的规范化事件对象作为回调函数的第一个参数传递:

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

请注意,我已将其命名,e但您可以将其称为几乎任何您喜欢的内容,前提是它是一个有效的JavaScript标识符.我e之所以选择,因为它很短(只有一个字符),相对明确(我知道它指的是一个代表一个事件的对象),而且我不太可能会影响任何其他具有相同名称的变量.