共计 1063 个字符，预计需要花费 3 分钟才能阅读完成。
1. 微信小程序
事件的捕获阶段 自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用 capture-bind、capture-catch 关键字，后者将中断捕获阶段和取消冒泡阶段。
当子节点与父节点都用普通的 bind 绑定了事件时，点击子节点也会触发父节点的事件。但需求是点击子节点只触发子节点事件。这时就可以在子节点用 capture-catch 来绑定事件，中断事件的捕获阶段和取消冒泡阶段，这样点击子节点时就只会触发子节点事件，并且不会触发父节点事件。
在以下代码中，点击 inner view 将只触发 handleTap4(因为它中断了捕获阶段和取消了冒泡阶段)
<view id=”outer” bind:touchstart=”handleTap1″ capture-bind:touchstart=”handleTap2″>
outer view
<view id=”inner” bind:touchstart=”handleTap3″ capture-catch:touchstart=”handleTap4″>
inner view
</view>
</view>
2. vue
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
stop
prevent
capture
self
once
passive
<el-collapse accordion>
<el-collapse-item>
<template slot=”title”>
<!– 阻止单击事件继续传播 –>
<div @click.stop=”doSomething”> 一致性 Consistency<i class=”header-icon el-icon-info”></i><div>
</template>
<div> 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div> 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
</el-collapse>
以上代码点击折叠面板 title 中的 div 时将不会触发折叠面板的 change 事件，只触发 doSomething。
3. 总结
要想实现只触发自身绑定的事件，而不触发它的子节点或父节点的事件，则：
在微信小程序中，使用 capture-catch 来绑定事件
在 vue 中，使用.stop 事件修饰符
