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

2022-09-13 16:08:35 浏览数 (1)
冒泡事件和捕获事件

冒泡事件是，进行

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

冒泡事件bindtap

代码语言：javascript复制
<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>
代码语言：javascript复制
.one{
  width: 200px;
  height: 200px;
  background-color: forestgreen;
}
.two{
  width: 100px;
  height: 100px;
  background-color: fuchsia;
}
.three{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
}

代码语言：javascript复制
...
_h1:function(evt){
  console.log('_h1',evt)
},
_h2:function(evt){
  console.log('_h2',evt)
},
_h3:function(evt){
  console.log('_h3',evt)
},
...

测试 点击 区域，事件会从内到外从小到大Console`控制台显示

捕获事件capture-bind:tap
代码语言：javascript复制
<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>
代码语言：javascript复制
.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}
代码语言：javascript复制
...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...
  • 测试 点击 three区域，事件会从外到到，从大到小进行传递,Console`控制台显示
非冒泡事件和捕获阻止事件
非冒泡事件catchtap
代码语言：javascript复制
<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>
代码语言：javascript复制
.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}
代码语言：javascript复制
...
_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
代码语言：javascript复制
<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>
代码语言：javascript复制
.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}
代码语言：javascript复制
...
_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)
代码语言：javascript复制
<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>
代码语言：javascript复制
.one{
    width: 200px;
    height: 200px;
    background-color: forestgreen;
}
.two{
    width: 100px;
    height: 100px;
    background-color: fuchsia;
}
.three{
    width: 50px;
    height: 50px;
    background-color: gainsboro;
}
代码语言：javascript复制
...
_h1:function(evt){
    console.log('_h1',evt)
},
_h2:function(evt){
    console.log('_h2',evt)
},
_h3:function(evt){
    console.log('_h3',evt)
},
...
  • 测试 点击 three区域，互斥事件绑定 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发，Console控制台显示
腾讯云测试服务 其他

0 人点赞