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

1. 微信小程序

事件的捕获阶段
自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、 capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

• 当子节点与父节点都用普通的bind绑定了事件时，点击子节点也会触发父节点的事件。但需求是点击子节点只触发子节点事件。这时就可以在子节点用capture-catch来绑定事件，中断事件的捕获阶段和取消冒泡阶段，这样点击子节点时就只会触发子节点事件，并且不会触发父节点事件。

• 在以下代码中，点击inner view将只触发handleTap4(因为它中断了捕获阶段和取消了冒泡阶段)

  
    outer view
    
      inner view
    
  

2. vue

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• stop
• prevent
• capture
• self
• once
• passive

  
    
    
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
    
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
  

以上代码点击折叠面板title中的div时将不会触发折叠面板的change事件，只触发doSomething。

3. 总结

要想实现只触发自身绑定的事件，而不触发它的子节点或父节点的事件，则：

• 在微信小程序中，使用capture-catch来绑定事件
• 在vue中，使用.stop事件修饰符