general-event.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt container">
        <view class="target" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </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>
            <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
          </template>
        </view>
        <view v-if="tapEvent !== null">
          <text class="title1">tap Event: </text>
          <text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
        </view>
        <view v-if="clickEvent !== null">
          <text class="title1">click Event: </text>
          <text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
export default {
  data() {
    return {
      title: 'general-event',
      onTouchStartTime: 0,
      touchStartEvent: null as TouchEvent | null,
      onTouchMoveTime: 0,
      touchMoveEvent: null as TouchEvent | null,
      onTouchEndTime: 0,
      touchEndEvent: null as TouchEvent | null,
      onTapTime: 0,
      tapEvent: null as MouseEvent | null,
      onClickTime: 0,
      clickEvent: null as MouseEvent | null,
      onLongPressTime: 0,
    }
  },
  methods: {
    onTouchStart(e: TouchEvent){
      this.touchStartEvent = e
      this.onTouchStartTime = Date.now()
      console.warn('onTouchStart', this.onTouchStartTime)
    },
    onTouchMove(e: TouchEvent){
      this.touchMoveEvent = e
      this.onTouchMoveTime = Date.now()
      console.warn('onTouchMove', this.onTouchMoveTime)
    },
    onTouchEnd(e: TouchEvent){
      this.touchEndEvent = e
      this.onTouchEndTime = Date.now()
      console.warn('onTouchEnd', this.onTouchEndTime)
    },
    onTap(e: MouseEvent){
      this.tapEvent = e
      this.onTapTime = Date.now()
      console.warn('onTap', this.onTapTime)
    },
    onClick(e: MouseEvent){
      this.clickEvent = e
      this.onClickTime = Date.now()
      console.warn('onClick', this.onClickTime)
    },
    onLongPress(){
      this.onLongPressTime = Date.now()
      console.warn('onLongPress', this.onLongPressTime)
    },
  },
}
</script>

<style>
.container {
  padding-bottom: 1000px;
}
.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>