OmniCard/mpuniapp/pages/component/global-events/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 setup lang="uts">


type DataType = {
  iconRect: DOMRect | null,
  viewEleRect: DOMRect | null,
  ret1: boolean,
  ret2: boolean,
}

const touchstartValue = ref([] as string[])
const touchmoveValue = ref([] as string[])
const touchendValue = ref([] as string[])
const data = reactive({
  iconRect: null as DOMRect | null,
  viewEleRect: null as DOMRect | null,
  ret1: false,
  ret2: false,
} as DataType)

function clearValue() {
  touchstartValue.value = []
  touchmoveValue.value = []
  touchendValue.value = []
}

function isPassTest1() {
  let touchStart = touchstartValue.value.join("")
  let touchMove = touchmoveValue.value.join("")
  let touchEnd = touchendValue.value.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)
  data.ret1 = result
  clearValue()
}

function isPassTest2() {
  let touchStart = touchstartValue.value.join("")
  let touchMove = touchmoveValue.value.join("")
  let touchEnd = touchendValue.value.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)
  data.ret2 = result
  clearValue()
}

function onTouchStart(e : TouchEvent) {
  let _id = e.currentTarget!.getAttribute("id") as string
  if (!touchstartValue.value.includes(_id)) {
    touchstartValue.value.push(_id)
  }
  console.log('onTouchStart', e.currentTarget!.getAttribute("id"))
}

function onTouchMove(e : TouchEvent) {
  let _id = e.currentTarget!.getAttribute("id") as string
  if (!touchmoveValue.value.includes(_id)) {
    touchmoveValue.value.push(_id)
  }
  console.log('onTouchMove', e.currentTarget!.getAttribute("id"))
}

function onTouchEnd(e : TouchEvent) {
  let _id = e.currentTarget!.getAttribute("id") as string
  if (!touchendValue.value.includes(_id)) {
    touchendValue.value.push(_id)
  }
}

onReady(() => {
  // #ifdef APP-IOS || APP-HARMONY
  let iconEle = uni.getElementById("view1-3")
  data.iconRect = iconEle?.getBoundingClientRect() ?? null
  // 加上导航栏及状态栏高度
  if (data.iconRect != null) {
    data.iconRect.y += uni.getSystemInfoSync().safeArea.top + 44
  }

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

  // #endif
})

defineExpose({
  data,
  isPassTest1,
  isPassTest2
})
</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>