简介
- 小程序中的事件分为冒泡事件和非冒泡事件两类。(一般默认是可冒泡的)
- 用bind绑定的事件不会阻止冒泡事件向上冒泡,catch绑定的事件可以阻止冒泡事件向上冒泡(下面以tap点击事件为例来讲解二者区别)
例:bindtap和catchtap事件都是当用户点击该组件的时候会执行该页面对应的Page中找到相应的事件处理函数,但是不同的是用bindtap不会阻止冒泡事件向上冒泡,catchtap会阻止冒泡事件向上冒泡(下面的实例会让你对二者有更清晰直观的认识)
实例
wxml:三层view从里到外嵌套
<view id="outside" bindtap="outsideTap">
outside view
<view id="middle" bindtap="middleTap">
middle view
<view id="inside" bindtap="insideTap">
inside view
</view>
</view>
</view>
js:事件处理函数
outsideTap:function(){
console.log("触发了外部事件")
},
middleTap: function () {
console.log("触发了中部事件")
},
insideTap: function () {
console.log("触发了内部事件")
}
实例解析:
- 三个view均绑定bindtap事件
- 点击outside view打印 “触发了外部事件”;
点击middle view打印 “触发了中部事件” 和 “触发了外部事件”;
点击inside view打印 “触发了内部事件” 和 “触发了中部事件” 和 “触发了外部事件” ;
- 点击outside view打印 “触发了外部事件”;
- 若将中部的midele view的bindtap事件改为catchtap事件
- 点击middle view打印 “触发了中部事件” (catchtap阻止了继续向上冒泡触发outsideTap事件);
点击inside view打印 “触发了内部事件” 和 “触发了中部事件” (catchtap阻止了继续向上冒泡触发outsideTap事件) ;
- 点击middle view打印 “触发了中部事件” (catchtap阻止了继续向上冒泡触发outsideTap事件);