背景

一、概念

首先引用百度百科解释下什么是事件冒泡。

所谓事件冒泡，就是指当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个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 动画完成时触发

备注：

除上表列举的事件类型之外的其他组件自定义事件，如无特殊声明都是非冒泡事件。

微信小程序中的冒泡事件

背景