小程序发送请求页面闪烁问题（小程序中如何解决事件冒泡）

上次说了 条件渲染和列表渲染，这次来说说事件的冒泡与非冒泡。

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

.wxml页面，绑定了一个showtxt变量，初始值为“我是 只说代码的大饼”,bindtap事件绑定了js中的对应方法bindPareantTap()、bindChildTap()：

.js文件中定义了showtxt变量和页面要绑定的两个方法bindPareantTap()、bindChildTap()：

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

.wxml页面，绑定了一个showtxt变量，初始值为“我是 只说代码的大饼”,catchdtap事件绑定了js中对应方法catchPareantTap()、catchChildTap()：

.js文件中定义了showtxt变量和页面要绑定的两个方法bindPareantTap()、bindChildTap()：

---

---

运行效果：

总结：

bind绑定的事件会冒泡，catch 绑定的事件会阻止事件向上冒泡。

---

附加代码：

<!--pages/059/bind_catch.wxml-->

<view>

<text>{{showtxt}}</text>

<view bindtap="bindPareantTap">

<image bindtap="bindChildTap" src="../../images/xiaochengxu03.png"></image>

</view>

</view>

<view>我是分割线</view>

<view>

<view catchdtap="catchPareantTap">

<image catchtap="catchChildTap" src="../../images/xiaochengxu03.png"></image>

</view>

</view>

/**

* 页面的初始数据

*/

data: {

showtxt:"我是 只说代码的大饼",

},

/**父事件**/

bindPareantTap:function(){

this.setData({

showtxt:"我是父事件"

})

console.log("bind parent");

},

bindChildTap:function(){

this.setData({

showtxt:"我是子事件"

})

console.log("bind child");

},

catchPareantTap:function(){

this.setData({

showtxt:"catch 父"

})

console.log("catch 父");

},

/**catch 子**/

catchChildTap:function(){

this.setData({

showtxt:"catch 子"

})

console.log("catch 子");

},

谢谢浏览，谢谢点赞和评论，喜欢的关注下呗，一起学习。

,