关于只触发自身绑定的事件

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事件修饰符