javascript - jQueryで正確にバインドされたイベントのみを発生させる方法

Question

クリック イベントを外側と内側の両方の div にバインドする必要があるシナリオがありますが、内側の div をクリックすると、外側と内側の div バインド イベントを含む 2 つのクリック イベントが発生するという問題が発生します。

内側の div に対してのみ発生する正確なイベントを取得するにはどうすればよいですか?

ここに jsfiddle デモを添付しました。

http://jsfiddle.net/mochatony/FkCmH/8/

Answer 1

return false;小さなボックス ハンドラに追加するだけです。

修正された jsFiddle: http://jsfiddle.net/brodenbaugh/BMPYd/

$('#small-box').click(function(){
    console.log('red box');
    return false;
});

Answer 2

.stopPropagationその名前が示すように、メソッドを使用してイベントが親にバブリングするのを防ぐことができます。更新されたリンク: http://jsfiddle.net/EQpA2/

$('#big-box').click(function(){
    console.log('blue box');     
});

$('#small-box').click(function(e){
    e.stopPropagation();
    console.log('red box');     
});

</p>