event.stopImmediatePropagation(）;适用于除火狐浏览器以外的所有浏览器

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

本文关键字：浏览器火狐浏览器 stopImmediatePropagation 适用于 event 更新时间：2023-09-26

我有一个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（）已被弃用。请改用默认预防"和"引用错误：未定义事件"。

我

是否以错误的方式使用了代码，或者 Firefox 中是否存在我应该注意的错误？

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

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

请注意，我已经将其命名为e但您可以随意调用它，只要它是有效的JavaScript标识符。我选择e因为它很短（只有一个字符），相对明确（我知道它指的是表示事件的对象），而且我不太可能隐藏任何其他具有相同名称的变量。

使用 event

1）

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

2）

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