小程序-点击事件（bindtap/catchtap）

样式图

板块分析：

1.“关注”按钮

2.“作者”信息

3.蓝色板块，模块主体

业务需求：

1.点击关注按钮实现当前文章的“关注”

2.点击用户信息实现页面跳转 -> 用户详情页

3.点击蓝色区域，实现页面跳转 -> 文章详情

逻辑实现：

1.为蓝色主体区域添加bindtap()事件

2.为“关注按钮”和“作者信息”区域添加catchtap()事件

知识点：

1.bindtap()点击事件会发生冒泡，意思就是，如果在页面上的子级元素中设置了bindtap()事件，会误触父级元素的点击事件。像当前页面结构中如果给“关注”按钮和“用户信息”区域绑定bindtap()事件，会触发父级元素的点击事件，进而进入到文章详情页。即触发自己的事件，但是也会误触父元素的点击事件。

2.catchtap()点击事件有两个主要作用：①防止冒泡事件的发生（对自己来说）②阻断冒泡事件的进行

防止冒泡：就是说使用catchtap事件之后，这个点击事件只会作用在当前元素自己身上，不会冒泡到父元素身上（适用于子级元素的点击事件）

阻断冒泡事件的进行：就是说在当前元素的子级元素总如果定义了bindtap()事件，到达当前元素之后，冒泡事件会被迫停止。

如何做选择？（个人建议）

在父级元素上，使用bindtap()事件和catchtap()事件都行，无所谓冒泡事件的影响，因为现在还没有碰到过父级元素使用catchtap事件。但是在子元素上边，建议使用catchtap()事件，防止冒泡的影响。