Javascript 如何停止jquery中的嵌套事件调用

在这里，我是jquery的初学者，我正在构建一个我面临问题的网页。 在这种情况下，当我单击article1或article2时，就会自动调用节和页面单击事件。我不想再给他们打电话了

这里是page.html

<div id="page">
    <div id="section">
        <div id="article1">this is article 1</div>
        <div id="article2">this is article 2</div>
    </div>
</div>

这里是page.css

#page {
    height: 600px;
    width: 600px;
    background-color:brown;
}
#section {
    height: 100px;
    width: 100px;
    background-color:red;
}
#article1 {
    background-color:green;
}
#article2 {
    background-color:yellow;
}

请提出解决方案。 提前感谢。

使用：

使用

event.stopPropagation();

这是一个jsfiddle

使用stopPropagation（）人

可能重复的

$('#page').on('click', function (evt) {
    evt.stopPropagation();
    alert('page');
});
$('#section').on('click', function (evt) {
    evt.stopPropagation();
    alert('section');
});
$('#article1').on('click', function (evt) {
    evt.stopPropagation();
    alert('article1');
});
$('#article2').on('click', function (evt) {
    evt.stopPropagation();
    alert('article1');
});

event.stopPropagation();

$(document).ready(function(){

    $('#page').on('click', function (e) {       
        e.stopPropagation();
    alert('page');  
    });
    $('#section').on('click', function (e) {       
        e.stopPropagation();
        alert('section');
    });
    $('#article1').on('click', function (e) {    
        e.stopPropagation();
        alert('article1');
    });
    $('#article2').on('click', function (e) {
        e.stopPropagation();
        alert('article1');
    });

})