背景一、概念首先引用百度百科解释下什么是事件冒泡。
所谓事件冒泡，就是指当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。
二、html、js冒泡事件介绍例如如下代码：
bodyonclick="alert('aaa');"divonclick="alert('bbb');"ahref="#"class="cooltip"title="这是我的超链接提示1。"onclick="alert('ddd');"提示/a/div/body上面这段代码一共有三个事件,body，div，a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒泡的过程是：
CreatedwithRaphaël2.1.2adivbodya冒泡到div冒泡到body。
三、引发问题本来在上面的代码中只想触发a元素的onclick事件，然而div、body事件也同时触发了。因此我们必须要对事件的作用范围进行限制，当单击a元素的onclick事件时只触发a本身的事件。
四、处理方法用event.stopPropagation()阻止事件的传递行为；query中可用用preventDefault()的方法来阻止元素的默认行为；jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果event.preventDefault();改写为：returnfalse;event.stopPropagation();改写为：returnfalse;小程序中的事件绑定和冒泡小程序中事件绑定的写法和组件属性一致，以key=”value”的形式，其中：
key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。也可以写成bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段。
bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段。对于如下代码：
viewid="outer"bind:tap="handleTap4"capture-bind:tap="handleTap1"outerviewviewid="inner"bind:tap="handleTap3"capture-bind:tap="handleTap2"innerview/view/view点击innerview会先后调用handleTap1、handleTap2、handleTap3、handleTap4。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如果将以上代码的capture-bind:tap="handleTap1"改成capture-catch:tap="handleTap1"，点击innerview只会触发handleTap1(catch事件阻止了tap事件冒泡)。如下：
viewid="outer"bind:tap="handleTap4"capture-catch:tap="handleTap1"outerviewviewid="inner"bind:tap="handleTap3"capture-bind:tap="handleTap2"innerview/view/view附表：小程序常见事件类型类型触发条件touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断，如来电提醒，弹窗touchend手指触摸动作结束tap手指触摸后马上离开longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend会在WXSStransition或wx.createAnimation动画结束后触发animationstart会在一个WXSSanimation动画开始时触发animationiteration会在一个WXSSanimation一次迭代结束时触发animationend会在一个WXSSanimation动画完成时触发备注：除上表列举的事件类型之外的其他组件自定义事件，如无特殊声明都是非冒泡事件。