背景
一、概念
首先引用百度百科解釋下什麼是事件冒泡。
所謂事件冒泡，就是指當事件發生後，這個事件就要開始傳播(從裏到外或者從外向裏)。爲什麼要傳播呢？因爲事件源本身（可能）並沒有處理事件的能力，即處理事件的函數（方法）並未綁定在該事件源上。例如我們點擊一個按鈕時，就會產生一個click事件，但這個按鈕本身可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數的名字，就是讓這個函數去處理該按鈕的click事件），或者按鈕的父級綁定有事件函數，當該點擊事件發生在按鈕上，按鈕本身並無處理事件函數，則傳播到父級去處理。
二、html、js冒泡事件介紹
例如如下代碼：
<body onclick="alert('aaa');">
<div onclick="alert('bbb');">
<a href="#" class="cooltip" title="這是我的超鏈接提示1。" onclick="alert('ddd');">提示</a>
</div>
</body>上面這段代碼一共有三個事件,body，div，a都分別綁定了單擊事件。在頁面中當單擊a標籤會連續彈出3個提示框。這就是事件冒泡引起的現象。事件冒 泡的過程是：
a冒泡到div冒泡到body。
三、引發問題
本來在上面的代碼中只想觸發<a>元素的onclick事件，然而<div>、<body>事件也同時 觸發了。因此我們必須要對事件的作用範圍進行限制，當單擊<a>元素的onclick事件時只觸發<a>本身的事件。
四、處理方法
- 用 event.stopPropagation()阻止事件的傳遞行爲；
- query中可用用preventDefault()的方法來阻止元素的默認行爲；
- jquery中對冒泡和默認行爲的阻止方法同樣也可以改寫，改寫後能夠達到同樣的效果
event.preventDefault(); 改寫爲： return false;
event.stopPropagation(); 改寫爲： return false;小程序中的事件綁定和冒泡
小程序中事件綁定的寫法和組件屬性一致，以key=”value”的形式，其中：
key以bind或者catch開頭，然後跟上事件的類型，如bindtap、catchtouchstart。也可以寫成bind:tap、catch:touchstart。同時bind和catch前還可以加上capture-來表示捕獲階段。
bind和capture-bind的含義分別代表事件的冒泡階段和捕獲階段。
對於如下代碼：
<view id="outer" bind:tap="handleTap4" capture-bind:tap="handleTap1">
outer view
<view id="inner" bind:tap="handleTap3" capture-bind:tap="handleTap2">
inner view
</view>
</view>點擊 inner view 會先後調用handleTap1、handleTap2、handleTap3、handleTap4。
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
如果將以上代碼的capture-bind:tap="handleTap1"改成capture-catch:tap="handleTap1"，點擊inner view只會觸發handleTap1(catch事件阻止了tap事件冒泡)。
如下：
<view id="outer" bind:tap="handleTap4" capture-catch:tap="handleTap1">
outer view
<view id="inner" bind:tap="handleTap3" capture-bind:tap="handleTap2">
inner view
</view>
</view>附表：小程序常見事件類型
| 類型 | 觸發條件 |
|---|---|
| touchstart | 手指觸摸動作開始 |
| touchmove | 手指觸摸後移動 |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 |
| touchend | 手指觸摸動作結束 |
| tap | 手指觸摸後馬上離開 |
| longpress | 手指觸摸後，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發 |
| longtap | 手指觸摸後，超過350ms再離開（推薦使用longpress事件代替） |
| transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發 |
| animationstart | 會在一個 WXSS animation 動畫開始時觸發 |
| animationiteration | 會在一個 WXSS animation 一次迭代結束時觸發 |
| animationend | 會在一個 WXSS animation 動畫完成時觸發 |
備註：
除上表列舉的事件類型之外的其他組件自定義事件，如無特殊聲明都是非冒泡事件。
