微信小程序学习笔记 > 事件冒泡

在 pages 下的 index.wxml 文件里面写主体框架

<view class='view1' bindtap='view1Click' id='view1' data-title='自己可以添加的数据' data-id='100'>
   爷爷
    <view class='view2' bindtap='view2Click'>
        父亲
        <view class='view3' bindtap='view3Click' id='view3'>
           儿子
        </view>
    </view>
</view>

绑定相同的事件点击 view3 的时候会触发 view2 和 view1  
如果想阻止冒泡在 view3 上用 catchtap 事件来绑定就好了 

在 pages 下的 index.js文件里面设置操作逻辑

  //事件处理函数

   //  说说 event 里面几个重要的属性 currentTarget 绑定事件 target 可以查看到时触发事件源，其中在
 currentTarget 里面有个属性叫 dataset 可以显示自己手动添加的数据例如 data-title = '我是标题' 最后  
"我是标题"  会在 dataset  中显示出来


    view1Click :function(event){
        console.log('view1Click');
        console.log(event);
    },
    view2Click :function(){
        console.log('view2Click')
    },

    view3Click :function(event){
        console.log('view3Click');
        console.log(event)
    },

在 pages 下的 index.wxss 文件里面设置样式

.view1{
  height:500rpx;
  width:100%;
  background-color: red;
 }
 .view2{
  height:300rpx;
  width:80%;
  background-color: green;
 }
 .view3{
  height:100rpx;
  width:50%;
  background-color: yellow;
 }