親のみを選択し、他のすべてを除外するclick（）

Question

私は＃コンテナとこのコンテナの子であるボタンを持っています。コンテナ自体（ボタンの周りの空白部分）をクリックすると背景色を変更したいが、ボタンをクリックすると何も起こりたくない。 jqueryので#containerの選択

が、しかし、私は多くのことを試してみた

<div id="container"> 
    <div class="button> 
     <span class="text">Button 1</span> 
    </div> 
    <div class="button> 
     <span class="text">Button 2</span> 
    </div> 
</div> 

$("#container").click(function() { 
    $('#container').css({background: 'blue'}); 
}); 

...同様のBGを変更するボタンをクリックなり、何も動作しているようだありません。参考

$("#container").click(function(event) { 
    if(event.target === this) { 
     $('#container').css({background: 'blue'}); 
    } 
}); 

：

Answer 1

は、イベントの本来の目的を調べevent.target

Answer 2

をクリックすると、IDをチェックし、あなたがボタンをピックアップしていません。

$("#container").click(function(event) { 
    if(event.target.id === "container") { 
     $('#container').css({background: 'blue'}); 
    } 
}); 

Answer 3

単純 別の解決策があります：

$('#container button').click(function(event) { 
    event.stopPropagation(); 
});