微信小程序冒泡事件及其阻止

       点击事件:tap

       长按事件:longtap

       触摸事件:touchstart; touchend;touchcancel;touchmove

       其他:input;submit....

  前三类是冒泡事件,其他的称为非冒泡事件

wxml代码



111
  222
     333
  

wxss代码

.view1{
    width: 500px;
    height: 500px;
    background: green;
}
.view2{
    width: 300px;
    height: 300px;
    background: red;
}
.view3{
    width: 100px;
    height: 100px;
    background: blue;
}

wxjs代码

//事件处理函数
cli1:function(){
console.log('view1')
},
cli2: function () {
    console.log('view2')
},
cli3: function () {
    console.log('view3')
},

冒泡事件的机制是点击最里层的三个盒子 先打印view3 依次是view2 view1,点击第二层盒子打印view2 view1

阻止冒泡事件的发生,直接把bindtap改为catchtap。点击不触发父盒子元素



你可能感兴趣的:(小程序)