EveryLike/pages/component/global-events/global-events.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head title="触摸方块测试相关事件"></page-head>
    <view class="uni-padding-wrap uni-common-mt container">
      <view class="target" id="touch-target" @touchstart="onTouchStart" @touchcancel="onTouchCancel"
        @touchmove="onTouchMove" @touchend="onTouchEnd"></view>
      <view class="target" id="longpress-target" @tap="onTap" @click="onClick" @longpress="onLongPress"></view>
      <view v-if="touchStartEvent !== null">
        <text class="title1">touchStart Event: </text>
        <text class="title2">touches: </text>
        <template v-for="(touch, index) in touchStartEvent!.touches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-start-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-start-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-start-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-start-touch-client-x">{{ touch.clientX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-start-touch-client-y">{{ touch.clientY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-start-touch-screen-x">{{ touch.screenX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-start-touch-screen-y">{{ touch.screenY }}</text>
          </view>
        </template>
        <text class="title2 uni-common-mt">changedTouches: </text>
        <template v-for="(touch, index) in touchStartEvent!.changedTouches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-start-changed-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-start-changed-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-start-changed-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-start-changed-touch-client-x">{{
              touch.clientX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-start-changed-touch-client-y">{{
              touch.clientY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-start-changed-touch-screen-x">{{
              touch.screenX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-start-changed-touch-screen-y">{{
              touch.screenY
            }}</text>
          </view>
        </template>
      </view>
      <view v-if="touchCancelEvent !== null">
        <text class="title1">touchCancel Event: </text>
        <text class="title2">touches: </text>
        <template v-for="(touch, index) in touchCancelEvent!.touches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-cancel-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-cancel-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-cancel-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-cancel-touch-client-x">{{ touch.clientX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-cancel-touch-client-y">{{ touch.clientY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-cancel-touch-screen-x">{{ touch.screenX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-cancel-touch-screen-y">{{ touch.screenY }}</text>
          </view>
        </template>
        <text class="title2 uni-common-mt">changedTouches: </text>
        <template v-for="(touch, index) in touchCancelEvent!.changedTouches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-cancel-changed-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-cancel-changed-touch-page-x">{{
              touch.pageX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-cancel-changed-touch-page-y">{{
              touch.pageY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-cancel-changed-touch-client-x">{{
              touch.clientX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-cancel-changed-touch-client-y">{{
              touch.clientY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-cancel-changed-touch-screen-x">{{
              touch.screenX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-cancel-changed-touch-screen-y">{{
              touch.screenY
            }}</text>
          </view>
        </template>
      </view>
      <view v-if="touchMoveEvent !== null">
        <text class="title1">touchMove Event: </text>
        <text class="title2">touches: </text>
        <template v-for="(touch, index) in touchMoveEvent!.touches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-move-touch-identifier">{{ touch.identifier }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-move-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-move-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-move-touch-client-x">{{ touch.clientX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-move-touch-client-y">{{ touch.clientY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-move-touch-screen-x">{{ touch.screenX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-move-touch-screen-y">{{ touch.screenY }}</text>
          </view>
        </template>
        <text class="title2 uni-common-mt">changedTouches: </text>
        <template v-for="(touch, index) in touchMoveEvent!.changedTouches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-move-changed-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-move-changed-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-move-changed-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-move-changed-touch-client-x">{{
              touch.clientX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-move-changed-touch-client-y">{{
              touch.clientY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-move-changed-touch-screen-x">{{
              touch.screenX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-move-changed-touch-screen-y">{{
              touch.screenY
            }}</text>
          </view>
        </template>
      </view>
      <view v-if="touchEndEvent !== null">
        <text class="title1">touchEnd Event: </text>
        <text class="title2">touches: </text>
        <template v-if="touchEndEvent!.touches.length > 0" v-for="(touch, index) in touchEndEvent!.touches"
          :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-end-touch-identifier">{{ touch.identifier }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-end-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-end-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-end-touch-client-x">{{ touch.clientX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-end-touch-client-y">{{ touch.clientY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-end-touch-screen-x">{{ touch.screenX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-end-touch-screen-y">{{ touch.screenY }}</text>
          </view>
        </template>
        <text class="title2 uni-common-mt">changedTouches: </text>
        <template v-for="(touch, index) in touchEndEvent!.changedTouches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="touch-end-changed-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="touch-end-changed-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="touch-end-changed-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="touch-end-changed-touch-client-x">{{
              touch.clientX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="touch-end-changed-touch-client-y">{{
              touch.clientY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="touch-end-changed-touch-screen-x">{{
              touch.screenX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="touch-end-changed-touch-screen-y">{{
              touch.screenY
            }}</text>
          </view>
        </template>
      </view>
      <view v-if="longPressEvent !== null">
        <text class="title1">longPress Event: </text>
        <text class="title2">touches: </text>
        <template v-if="longPressEvent!.touches.length > 0" v-for="(touch, index) in longPressEvent!.touches"
          :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="long-press-touch-identifier">{{ touch.identifier }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="long-press-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="long-press-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="long-press-touch-client-x">{{ touch.clientX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="long-press-touch-client-y">{{ touch.clientY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="long-press-touch-screen-x">{{ touch.screenX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="long-press-touch-screen-y">{{ touch.screenY }}</text>
          </view>
        </template>
        <text class="title2 uni-common-mt">changedTouches: </text>
        <template v-for="(touch, index) in longPressEvent!.changedTouches" :key="index">
          <text class="title3">touch[{{ index }}]:</text>
          <view class="uni-list-cell">
            <text>identifier: </text>
            <text id="long-press-changed-touch-identifier">{{
              touch.identifier
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageX: </text>
            <text id="long-press-changed-touch-page-x">{{ touch.pageX }}</text>
          </view>
          <view class="uni-list-cell">
            <text>pageY: </text>
            <text id="long-press-changed-touch-page-y">{{ touch.pageY }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientX: </text>
            <text id="long-press-changed-touch-client-x">{{
              touch.clientX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>clientY: </text>
            <text id="long-press-changed-touch-client-y">{{
              touch.clientY
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenX: </text>
            <text id="long-press-changed-touch-screen-x">{{
              touch.screenX
            }}</text>
          </view>
          <view class="uni-list-cell">
            <text>screenY: </text>
            <text id="long-press-changed-touch-screen-y">{{
              touch.screenY
            }}</text>
          </view>
        </template>
      </view>
      <view v-if="tapEvent !== null">
        <text class="title1">tap Event: </text>
        <view class="uni-list-cell">
          <text>x: </text>
          <text id="tap-event-x">{{ tapEvent!.x }}</text>
        </view>
        <view class="uni-list-cell">
          <text>y: </text>
          <text id="tap-event-y">{{ tapEvent!.y }}</text>
        </view>
      </view>
      <view v-if="clickEvent !== null">
        <text class="title1">click Event: </text>
        <view class="uni-list-cell">
          <text>x: </text>
          <text id="click-event-x">{{ clickEvent!.x }}</text>
        </view>
        <view class="uni-list-cell">
          <text>y: </text>
          <text id="click-event-y">{{ clickEvent!.y }}</text>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  export default {
    data() {
      return {
        title: 'global-events',
        touchStartEvent: null as TouchEvent | null,
        touchCancelEvent: null as TouchEvent | null,
        touchMoveEvent: null as TouchEvent | null,
        longPressEvent: null as TouchEvent | null,
        touchEndEvent: null as TouchEvent | null,
        tapEvent: null as PointerEvent | null,
        clickEvent: null as PointerEvent | null,
      }
    },
    methods: {
      onTouchStart(e : TouchEvent) {
        this.touchStartEvent = e
        console.log('onTouchStart', e)
      },
      onTouchCancel(e : TouchEvent) {
        this.touchCancelEvent = e
        console.log('onTouchCancel')
      },
      onTouchMove(e : TouchEvent) {
        this.touchMoveEvent = e
        console.log('onTouchMove', e)
      },
      onLongPress(e : TouchEvent) {
        this.longPressEvent = e
        console.log('onLongPress', e)
      },
      onTouchEnd(e : TouchEvent) {
        this.touchEndEvent = e
        console.log('onTouchEnd', e)
      },
      onTap(e : PointerEvent) {
        this.tapEvent = e
        console.log('onTap', e)
      },
      onClick(e : PointerEvent) {
        this.clickEvent = e
        console.log('onClick', e)
      }
    },
  }
</script>

<style>
  .container {
    padding-bottom: 10px;
  }

  .target {
    margin: 20px 0 0 50px;
    width: 200px;
    height: 100px;
    background-color: aqua;
  }

  .title1 {
    margin-top: 15px;
    font-size: 20px;
  }

  .title2 {
    margin-top: 10px;
    font-size: 18px;
  }

  .title3 {
    margin-top: 5px;
    font-size: 16px;
  }
</style>