touch-events-bubbles.uvue

<template>
  <scroll-view style="flex: 1">
    <page-head title="事件冒泡测试"></page-head>
    <view class="container">
      <view class="view-box" id="view1" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        <view class="mid-view" id="view1-2" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
          <image class="icon" id="view1-3" src="../image/logo.png" @touchstart="onTouchStart" @touchmove="onTouchMove"
            @touchend="onTouchEnd"></image>
        </view>
      </view>
      <view class="view-box" id="view2" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        <view class="mid-view" id="view2-2" @touchend="onTouchEnd">
          <view style="background-color: beige;" class="icon" id="view2-3" @touchstart="onTouchStart" @touchend="onTouchEnd"></view>
        </view>
      </view>

    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        iconRect: null as DOMRect | null,
        viewEleRect: null as DOMRect | null,
        touchstartValue: [] as string[],
        touchmoveValue: [] as string[],
        touchendValue: [] as string[],
        ret1: false,
        ret2: false
      }
    },
    onReady() {
      // #ifdef APP-IOS
      let iconEle = uni.getElementById("view1-3")
      this.iconRect = iconEle?.getBoundingClientRect()
      // 加上导航栏及状态栏高度
      this.iconRect.y += uni.getSystemInfoSync().safeArea.top + 44

      let viewEle = uni.getElementById("view2-3")
      this.viewEleRect = viewEle?.getBoundingClientRect()
      // 加上导航栏及状态栏高度
      this.viewEleRect.y += uni.getSystemInfoSync().safeArea.top + 44

      // #endif
    },
    methods: {
      clearValue() {
        this.touchstartValue = []
        this.touchmoveValue = []
        this.touchendValue = []
      },
      isPassTest1() {

        let touchStart = this.touchstartValue.join("")
        let touchMove = this.touchmoveValue.join("")
        let touchEnd = this.touchendValue.join("")
        console.log("touchStart: ", touchStart)
        console.log("touchMove: ", touchMove)
        console.log("touchEnd: ", touchEnd)

        let result = touchStart == "view1-3view1-2view1" &&
          touchMove == "view1-3view1-2view1" &&
          touchEnd == "view1-3view1-2view1"
        console.log('isPassTest1', result)
        this.ret1 = result
        this.clearValue()
      },
      isPassTest2() {

        let touchStart = this.touchstartValue.join("")
        let touchMove = this.touchmoveValue.join("")
        let touchEnd = this.touchendValue.join("")
        console.log("touchStart: ", touchStart)
        console.log("touchMove: ", touchMove)
        console.log("touchEnd: ", touchEnd)

        let result = touchStart == "view2-3view2" &&
          touchMove == "view2" &&
          touchEnd == "view2-3view2-2view2"
        console.log('isPassTest2', result)
        this.ret2 = result
        this.clearValue()
      },
      onTouchStart(e : TouchEvent) {
        let _id = e.currentTarget!.attributes.get("id") as string


        if (!this.touchstartValue.includes(_id)) {
          this.touchstartValue.push(_id)
        }

        console.log('onTouchStart', e.currentTarget!.attributes.get("id"))
      },
      onTouchMove(e : TouchEvent) {


        let _id = e.currentTarget!.attributes.get("id") as string

        if (!this.touchmoveValue.includes(_id)) {
          this.touchmoveValue.push(_id)
        }

        console.log('onTouchMove', e.currentTarget!.attributes.get("id"))
      },
      onTouchEnd(e : TouchEvent) {

        let _id = e.currentTarget!.attributes.get("id") as string

        if (!this.touchendValue.includes(_id)) {
          this.touchendValue.push(_id)
        }
      }
    }
  }
</script>

<style>
  .container {
    width: 100%;
    height: 80%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .view-box {
    width: 200px;
    height: 200px;
    align-items: center;
    justify-content: center;
    border-style: solid;
  }

  .mid-view {
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    background-color: aqua;
  }

  .icon {
    width: 100px;
    height: 100px;
  }
</style>