美文网首页
微信小程序事件冒泡bindtap和catchtap

微信小程序事件冒泡bindtap和catchtap

作者: 剑圣_盖小聂 | 来源:发表于2021-01-29 15:46 被阅读0次

    微信小程序bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。如:
    catchtap:

    <view id="outer" bindtap="handleTap1">
        outer view
        <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
    </view>
     
    Page({
        handleTap1:function(event){  //点击输出outer view bindtap
          console.log("outer view bindtap")
        },
        handleTap2: function (event) {  //点击输出middle view
          console.log("middle view catchtap")
        },
        handleTap3: function (event) {  //点击输出inner view bindtap  middle view catchtap
          console.log("inner view bindtap")
        },
    })
    

    bindtap:

    <view id="outer" bindtap="handleTap1">
        outer view
        <view id="middle" bindtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
    </view>
     
    Page({
        handleTap1:function(event){  //点击输出outer view bindtap
          console.log("outer view bindtap")
        },
        handleTap2: function (event) {  //点击输出outer view bindtap middle view
          console.log("middle view catchtap")
        },
        handleTap3: function (event) {  //点击输出outer view bindtap inner view bindtap  middle view catchtap
          console.log("inner view bindtap")
        },
    })
    

    相关文章

      网友评论

          本文标题:微信小程序事件冒泡bindtap和catchtap

          本文链接:https://www.haomeiwen.com/subject/lpnozktx.html