0

私が持っているものは<div#graphicsCloseBox>中に入れ子になってい<div#catbox>ます。をクリックすると、クラスが元に戻ります。ボックス内にフォーム入力があるため、toggleClass を使用できないため、フォームをクリックすると混乱します。

 $('#catbox').click(function() {
        $(this).removeClass('cat');
        $(this).addClass('cat2');
});
$('#graphicsCloseBox').click(function() {
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
});

例が必要な場合は、http://codepen.io/rtro92/pen/mihluを確認してください 。ただし、これは非常に簡単です。問題が 2 番目の関数にあることはわかっていますが、#catbox をターゲットにすることはできません。ありがとう！

4

4 に答える 4

6

クリック イベントが外側の DIV までバブリングしています。

使用する.stopPropagation()

$('#catbox').click(function() {
        $(this).removeClass('cat');
        $(this).addClass('cat2');
});
$('#graphicsCloseBox').click(function(event) {
    $('#catbox').removeClass('cat2');
    $('#catbox').addClass('cat');
    event.stopPropagation();
});
于 2013-05-02T15:24:09.483 に答える
4

あなたの問題はおそらくイベントの伝播(別名「バブリング」) です。これは、イベントが特にそうしないように指示されない限り、1 つの DOM 要素のイベントがそのすべての親に「バブリング」する機能です。

つまり、誰かが をクリックする<div#graphicsCloseBox>と、指定したとおりにクラスが正しく追加および削除されます。その直後に、clickイベント on<div#catbox>がトリガーされます。これにより、クラスがリセットされるため、 inner でのクリックの効果が元に戻ります<div>。

それを修正するには、次を使用します.stopPropagation()。

$('#graphicsCloseBox').click(function(evt) {
    // your other stuff
    evt.stopPropagation();
    return false;
});

最後になくても機能するはずreturn falseですが、ほとんどのブラウザは「偽の」戻り値を使用してバブリングを防ぐことができるため、通常はとにかくそこに押し込みます.

于 2013-05-02T15:28:05.187 に答える