3

画像カルーセルを作成するために使用される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()andを使用してみましevent.preventDefault();たが、両方のコードが機能しません。

私が Firefox から受け取ったエラーは、「getPreventDefault() の使用は非推奨です。代わりに defaultPrevented を使用してください」および「ReferenceError: イベントが定義されていません」。

コードの使い方が間違っているのでしょうか、それとも Firefox に注意すべきバグがありますか?

4

2 に答える 2

6

すべての jQuery イベント ハンドラーに対して、最初の引数としてコールバック関数に渡される jQuery の正規化されたイベント オブジェクトを使用します。

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

私が名前を付けましたeが、有効な JavaScript 識別子であれば、好きな名前を付けることができます。私が選んeだのは、それが短く (1 文字だけ)、比較的明示的 (イベントを表すオブジェクトを参照していることはわかっています) であり、同じ名前を持つ他の変数をシャドウイングする可能性が低いためです。

于 2013-10-21T12:53:12.233 に答える
0

使用するevent

1)

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

2)

$('.next').click(function(event){
event.stopImmediatePropagation();
于 2013-10-21T12:54:46.743 に答える