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