微信小程序中的事件捕获和冒泡
学习微信小程序原生开发,记录一下,防止忘记。
事件捕获:事件触发的过程是从外层的容器一层一层的向目标元素触发。
事件冒泡:事件的触发从里层依次向最外层传递。
如图:
代码:
capture-bind:tap这个属性是监听事件捕获的。
bindtap属性是监听事件冒泡的。
当点击最里层的view3的时候,打印结果如图:
先事件捕获:从最外层的click1事件触发,捕获到最里面,然后再从最里面冒泡到最外面。
这就是事件的捕获和冒泡。
在开发过程中,为了解决事件的冒泡或者捕获,怎么实现呢?
意思就是我点击最里面的view3就只触发view3的事件。
首先不要监听事件的捕获,去除capture-bind:tap属性,只保留bindtap属性
代码:
这时候点击view就只会触发view3的事件,因为用了catch来绑定事件。
catch:阻止事件的进一步传递。
bind:事件会一步一步得传递。
如果想实现点击view3只触发view1的事件,意思在事件捕获到view1的时候就阻止事件的传递。
代码:
只需要把监听view1的捕获事件的bind改为catch,阻止事件的进一步传递。