Javascript 事件。stopImmediatePropagation();适用于除Firefox以外的所有浏览器
我有一个jQuery代码,用于创建图像旋转木马。我知道这不是最优雅的代码Javascript 事件。stopImmediatePropagation();适用于除Firefox以外的所有浏览器,javascript,jquery,html,css,firefox,Javascript,Jquery,Html,Css,Firefox,我有一个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');
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)');
});
});
事件.stopImmediatePropagation()
正在Chrome、Opera和Safari上运行,但不在Firefox上运行。我试过使用event.stopPropagation()
和event.preventDefault()代码>但两种代码都不起作用
我从Firefox得到的错误是“getPreventDefault()的使用已被弃用”。改用defaultPrevented'和'ReferenceError:未定义事件'
我是否以错误的方式使用代码,或者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
(或类似项)。让我们看看我有一条错误消息,上面说:“'ReferenceError:event's not defined.”其中oh Where是event defined,在哪里?在哪里?注意:对于那些可能被这里的特殊性所迷惑的人来说:函数参数的名称并不重要:e
,evt
,event
,甚至foo
都会很好地引用事件对象e
只是短一点,如果您喜欢短一点的话。
$('.prev').click(function(event){
event.stopImmediatePropagation();
$('.next').click(function(event){
event.stopImmediatePropagation();