javascript - 如何让 jQuery 只触发精确绑定的事件

Question

我有一个场景，我必须将点击事件绑定到外部和内部 div，但是出现了一个问题，我点击内部 div 它将触发 2 个点击事件，包括外部和内部 div 绑定事件。

如何仅为内部 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>