微信小程序中的事件

1、打开小程序开发工具，在项目pages目录新建myIndex文件夹，并在此文件夹下新建page，名为mypage，在app.json配置文件中将mypage设为第一页面

2、在mypage.wxml中写代码如下，布局三个嵌套的view<view bi艘绒庳焰ndtap='view1tap刻八圄俏9; class='view1' id ='view1'><view bindtap='view2tap' class='view2' id = 'view2'><view bindtap='view3tap' class='view3' id='view3'></view></view></view >

3、为方便显示，在mypage.wxss中给三个view添加背景颜色的属性，代码如下：.view1{width: 100%;height: 200rpx;background-color: red;}.view2{width: 50%;height: 100rpx;background-color: blue;}.view3{width: 50%;height: 50rpx;background-color: wheat;}

4、在mypage.js中为三个view添加tap事件的处理函数，代码如下：view1tap:function(){console.log('view1 click');},view2tap:function(){console.log('view2 click');},view3tap: function () {console.log('view3 click');}

5、编译运行代码，在右侧的模拟器点击view3最小的view，在右侧console中会发现页触发view2和view3的bindtap的响应方法，这称为事件的冒泡

6、为阻止事件的冒泡，使用罕铞泱殳catchtap来绑定事件，更改mypage.wxml代码如下：<view 芟鲠阻缒bindtap='view1tap' class='view1' id ='view1'><view bindtap='view2tap' class='view2' id = 'view2'><view catchtap='view3tap' class='view3' id='view3'></view></view></view >

7、再次编译运行代码，点击view3时console就只会打印出view3点击的消息了