什么是事件冒泡
在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類(lèi)事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
事件冒泡的作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。
阻止事件冒泡
事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過(guò) event.stopPropagation() 來(lái)阻止
$(function(){
? ? var $box1 = $('.father');
? ? var $box2 = $('.son');
? ? var $box3 = $('.grandson');
? ? $box1.click(function() {
? ? ? ? alert('father');
? ? });
? ? $box2.click(function() {
? ? ? ? alert('son');
? ? });
? ? $box3.click(function(event) {
? ? ? ? alert('grandson');
? ? ? ? event.stopPropagation();
? ? });
? ? $(document).click(function(event) {
? ? ? ? alert('grandfather');
? ? });
})
......
<div class="father">
? ? <div class="son">
? ? ? ? <div class="grandson"></div>
? ? </div>
</div>
```
阻止默認(rèn)行為
阻止右鍵菜單
```js
$(document).contextmenu(function(event) {
? ? event.preventDefault();
});
```
合并阻止操作
實(shí)際開(kāi)發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來(lái)寫(xiě)，合并寫(xiě)法可以用
```js
// event.stopPropagation();
// event.preventDefault();
// 合并寫(xiě)法：
return false;
```
