關於只觸發自身綁定的事件

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