美文网首页
微信小程序 WXML事件 WXML冒泡事件列表

微信小程序 WXML事件 WXML冒泡事件列表

作者: Karaio | 来源:发表于2018-11-09 15:10 被阅读0次

    WXML事件分为 冒泡事件 和 非冒泡事件。

    • 冒泡事件:当一个事件被触发后,该事件会向父节点传递。
    • 非冒泡事件:不会向父节点传递。

    WXML的冒泡事件列表:

    类型 触发条件
    touchstart 手指触摸
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如:来电、弹窗
    touchend 手指触摸动作结束
    tap 点击事件(手指触摸后离开)
    longtap 长按事件(手指触摸后,超过350ms后离开)

    注:bindtap 和 catchtap 两种事件绑定。bindtap不会阻止事件向上冒泡,catchtap会阻止事件冒泡。

    事件对象的属性:
    属性 类型 说明
    type String 事件类型
    timeTamp Integer 事件生产的时间戳
    target Object 触发事件的组件的一些属性值集合
    CurrentTarget Object 当前组件的一些属性值集合
    detail Object 额外的信息

    针对以上代码示例

    <view id='outter' bindtap='tap1'>
      Parent view
      <view id='middle' catchtap='tap2'>
        Sub view
        <view id='inner' bindtap='tap3'>
          Sun view
        </view>
      </view>
    </view>
    
    • 冒泡分析:点击 Sun 触发 tap3 事件,因为 tap2 是通过catch 绑定的事件,阻止了事件继续向上传递,因此不能执行 tap1 事件,只有点击 Parent 才可以触发 tap1。

    • target分析:点击 Sun 时,tap3 收到的事件对象 target 和currentTarget 都是 Sun,而 tap2 收到的事件对象 target 是Sun,currentTarget 是 Sub。

    注:<canvas /> 中的触摸事件属于特殊事件,不可冒泡,所以没有 currentTarget。

    相关文章

      网友评论

          本文标题:微信小程序 WXML事件 WXML冒泡事件列表

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