微信小程序：冒泡事件与非冒泡事件

事件分为冒泡事件和非冒泡事件：

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

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

详情见 https://blog.csdn.net/Jeremy__Lin/article/details/80629588

解决方法：给绑定change事件的元素或组件另外添加@click.stop指向一个空函数，用来阻止冒泡

注：此方法主要用于mpvue，@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定change事件的元素或组件添加catchtap绑定一个空函数

这是在用mpvue开发小程序时遇到一个问题，项目需要引用小程序的picker选择器组件，发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件（项目需要实现对一个模块进行点击跳转，同时要求模块内的一个子元素有选择器功能）

开始通过查看vue文档和小程序文档，找到两种方法，分别是vue的.stop阻止冒泡和小程序的catch前缀，但通过测试发现给change事件直接添加.stop或者catch没有用

最后选用了网上搜到的一个折中的方法，给picker选择器另外添加一个点击事件（或者给选择器的父元素添加点击事件），为新加的点击事件添加阻止冒泡方法，使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题

如果大家还有更好的方法，欢迎留言

js负责页面与用户的交互，动态修改页面的内容。使用js脚本来处理用户的 *** 作。

*** 作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样，组件绑定事件，js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才，附上 博客地址☜

事件分为冒泡事件和非冒泡事件

1.冒泡事件:当一个组件被触发后，该事件以此向父节点传递。

2.非冒泡事件:当一个组件触发后，该事件不会向父节点传递。

解释：当点击子节点时，会依次触发"bind事件2，bind事件1"

解释：当点击子节点时，只触发"bind事件2"，而没有触发"bind事件1"

自基础班1.5.0起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch，当然catch还是中断，取消冒泡阶段。

1. 示例1，执行顺序为hand2,hand4,hand3,hand1

2. 示例2，加入capture-catch捕获事件，只执行hand2

---