板块分析:
1.“关注”按钮
2.“作者”信息
3.蓝色板块,模块主体
业务需求:
1.点击关注按钮实现当前文章的“关注”
2.点击用户信息实现页面跳转 -> 用户详情页
3.点击蓝色区域,实现页面跳转 -> 文章详情
逻辑实现:
1.为蓝色主体区域添加bindtap()事件
2.为“关注按钮”和“作者信息”区域添加catchtap()事件
知识点:
1.bindtap()点击事件会发生冒泡,意思就是,如果在页面上的子级元素中设置了bindtap()事件,会误触父级元素的点击事件。像当前页面结构中如果给“关注”按钮和“用户信息”区域绑定bindtap()事件,会触发父级元素的点击事件,进而进入到文章详情页。即触发自己的事件,但是也会误触父元素的点击事件。
2.catchtap()点击事件有两个主要作用:①防止冒泡事件的发生(对自己来说)②阻断冒泡事件的进行
防止冒泡:就是说使用catchtap事件之后,这个点击事件只会作用在当前元素自己身上,不会冒泡到父元素身上(适用于子级元素的点击事件)
阻断冒泡事件的进行:就是说在当前元素的子级元素总如果定义了bindtap()事件,到达当前元素之后,冒泡事件会被迫停止。
如何做选择?(个人建议)
在父级元素上,使用bindtap()事件和catchtap()事件都行,无所谓冒泡事件的影响,因为现在还没有碰到过父级元素使用catchtap事件。但是在子元素上边,建议使用catchtap()事件,防止冒泡的影响。