微信小程序的冒泡、非冒泡、捕获、捕获阻止、互斥事件

友儿

March 15, 2022

1045 views

No comments

3520 words

微信小程序

冒泡事件和捕获事件

冒泡事件是从内到外，从小到大进行

捕获事件是从外向内，从大到小

冒泡事件`bindtap`

<view id="one" class="one" bindtap="_h1">
one
 <view id="two" class="two" bindtap="_h2">
 two
     <view  id="three" class="three" bindtap="_h3">
     three
     </view>
 </view>
</view>

.one{
  width: 200px;
  height: 200px;
  background-color: forestgreen;
}
.two{
  width: 100px;
  height: 100px;
  background-color: fuchsia;
}
.three{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
}

...
_h1:function(evt){
  console.log('_h1',evt)
},
_h2:function(evt){
  console.log('_h2',evt)
},
_h3:function(evt){
  console.log('_h3',evt)
},
...

测试点击 three区域，事件会从内到外，从小到大进行传递,Console`控制台显示

捕获事件`capture-bind:tap`

<view id="one" class="one" capture-bind:tap="_h1">
one
   <view id="two" class="two" capture-bind:tap="_h2">
   two
       <view  id="three" class="three" capture-bind:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

测试点击 three区域，事件会从外到到，从大到小进行传递,Console`控制台显示

非冒泡事件和捕获阻止事件

非冒泡事件`catchtap`

<view id="one" class="one" bindtap="_h1">
one
   <view id="two" class="two" catchtap="_h2">
   two
       <view  id="three" class="three" catchtap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

测试点击 three区域，事件从内到外传递被阻止,Console控制台显示

捕获阻止事件`capture-catch:tap`

<view id="one" class="one" capture-catch:tap="_h1">
one
   <view id="two" class="two" capture-catch:tap="_h2">
   two
       <view  id="three" class="three" capture-catch:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...

测试点击 three区域，事件从外到内传递被阻止,Console控制台显示

互斥事件(mut-bind:tap)

<view id="one" class="one" bindtap="_h1">
one
   <view id="two" class="two" mut-bind:tap="_h2">
   two
       <view  id="three" class="three" mut-bind:tap="_h3">
       three
       </view>
   </view>
</view>

.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}

...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...