{HTML5}事件对象-冒泡和默认行为

​如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。

//HTML 页面

<divstyle="width:200px;height:200px;background:red;"> 

<inputtype="button" value="按钮" />

</div>

//三个不同元素触发事件

$('input').click(function() {

alert('按钮被触发了！');

});

$('div').click(function() {

alert('div 层被触发了！');

});

$(document).click(function() {

alert('文档页面被触发了！');

});

注意：当我们点击文档的时候，只触发文档事件；当我们点击 div 层时，触发了 div 和文档两个；当我们点击按钮时，触发了按钮、div 和文档。触发的顺序是从小范围到大范围。这就是所谓的冒泡现象，一层一层往上。

jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发的事件上时，所有上层的冒泡行为都将被取消。

$('input').click(function(e) {

alert('按钮被触发了！');

e.stopPropagation();    //阻止其它的冒泡（元素）事件

});