test(general event): 优化示例及测试

pages/component/general-event/general-event.test.js

 const PAGE_PATH = '/pages/component/general-event/general-event'
 
 describe('event trigger sequence', () => {
+  const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
+  const isAndroid = platformInfo.startsWith('android')
   let page
-  let el
   beforeAll(async () => {
     page = await program.navigateTo(PAGE_PATH)
     await page.waitFor('view')
-    el = await page.$('.target')
   })
 
   it('touch', async () => {
-    if (process.env.uniTestPlatformInfo.startsWith('android') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
+    if (!process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
+      const el = await page.$('#touch-target')
       await el.touchstart({
         touches: [{
           identifier: 1,
-          pageX: 100,
-          pageY: 100,
+          pageX: 101,
+          pageY: 101,
+          clientX: 101,
+          clientY: 101,
+          screenX: 101,
+          screenY: 101
         }, ],
         changedTouches: [{
           identifier: 1,
-          pageX: 100,
-          pageY: 100,
+          pageX: 101,
+          pageY: 101,
+          clientX: 101,
+          clientY: 101,
+          screenX: 101,
+          screenY: 101
         }, ],
       })
+      const touchStartTouchTargetIdentifier = isAndroid ? '1.0' : '1'
+      const touchStartTouchTargetValue = isAndroid ? '101.0' : '101'
+      const touchStartTouchIdentifier = await page.$('#touch-start-touch-identifier')
+      expect(await touchStartTouchIdentifier.text()).toBe(touchStartTouchTargetIdentifier)
+      const touchStartTouchPageX = await page.$('#touch-start-touch-page-x')
+      expect(await touchStartTouchPageX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartTouchPageY = await page.$('#touch-start-touch-page-y')
+      expect(await touchStartTouchPageY.text()).toBe(touchStartTouchTargetValue)
+      const touchStartTouchClientX = await page.$('#touch-start-touch-client-x')
+      expect(await touchStartTouchClientX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartTouchClientY = await page.$('#touch-start-touch-client-y')
+      expect(await touchStartTouchClientY.text()).toBe(touchStartTouchTargetValue)
+      const touchStartTouchScreenX = await page.$('#touch-start-touch-screen-x')
+      expect(await touchStartTouchScreenX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartTouchScreenY = await page.$('#touch-start-touch-screen-y')
+      expect(await touchStartTouchScreenY.text()).toBe(touchStartTouchTargetValue)
+
+      const touchStartChangedTouchIdentifier = await page.$('#touch-start-changed-touch-identifier')
+      expect(await touchStartChangedTouchIdentifier.text()).toBe(touchStartTouchTargetIdentifier)
+      const touchStartChangedTouchPageX = await page.$('#touch-start-changed-touch-page-x')
+      expect(await touchStartChangedTouchPageX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartChangedTouchPageY = await page.$('#touch-start-changed-touch-page-y')
+      expect(await touchStartChangedTouchPageY.text()).toBe(touchStartTouchTargetValue)
+      const touchStartChangedTouchClientX = await page.$('#touch-start-changed-touch-client-x')
+      expect(await touchStartChangedTouchClientX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartChangedTouchClientY = await page.$('#touch-start-changed-touch-client-y')
+      expect(await touchStartChangedTouchClientY.text()).toBe(touchStartTouchTargetValue)
+      const touchStartChangedTouchScreenX = await page.$('#touch-start-changed-touch-screen-x')
+      expect(await touchStartChangedTouchScreenX.text()).toBe(touchStartTouchTargetValue)
+      const touchStartChangedTouchScreenY = await page.$('#touch-start-changed-touch-screen-y')
+      expect(await touchStartChangedTouchScreenY.text()).toBe(touchStartTouchTargetValue)
+
       await el.touchmove({
         touches: [{
           identifier: 1,
-          pageX: 100,
-          pageY: 100,
-        }, ],
+          pageX: 102,
+          pageY: 102,
+          clientX: 102,
+          clientY: 102,
+          screenX: 102,
+          screenY: 102
+        }],
         changedTouches: [{
           identifier: 1,
-          pageX: 101,
-          pageY: 101,
+          pageX: 102,
+          pageY: 102,
+          clientX: 102,
+          clientY: 102,
+          screenX: 102,
+          screenY: 102
         }, ],
       })
+
+      const touchMoveTouchTargetIdentifier = isAndroid ? '1.0' : '1'
+      const touchMoveTouchTargetValue = isAndroid ? '102.0' : '102'
+      const touchMoveTouchIdentifier = await page.$('#touch-move-touch-identifier')
+      expect(await touchMoveTouchIdentifier.text()).toBe(touchMoveTouchTargetIdentifier)
+      const touchMoveTouchPageX = await page.$('#touch-move-touch-page-x')
+      expect(await touchMoveTouchPageX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveTouchPageY = await page.$('#touch-move-touch-page-y')
+      expect(await touchMoveTouchPageY.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveTouchClientX = await page.$('#touch-move-touch-client-x')
+      expect(await touchMoveTouchClientX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveTouchClientY = await page.$('#touch-move-touch-client-y')
+      expect(await touchMoveTouchClientY.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveTouchScreenX = await page.$('#touch-move-touch-screen-x')
+      expect(await touchMoveTouchScreenX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveTouchScreenY = await page.$('#touch-move-touch-screen-y')
+      expect(await touchMoveTouchScreenY.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchIdentifier = await page.$('#touch-move-changed-touch-identifier')
+      expect(await touchMoveChangedTouchIdentifier.text()).toBe(touchMoveTouchTargetIdentifier)
+      const touchMoveChangedTouchPageX = await page.$('#touch-move-changed-touch-page-x')
+      expect(await touchMoveChangedTouchPageX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchPageY = await page.$('#touch-move-changed-touch-page-y')
+      expect(await touchMoveChangedTouchPageY.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchClientX = await page.$('#touch-move-changed-touch-client-x')
+      expect(await touchMoveChangedTouchClientX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchClientY = await page.$('#touch-move-changed-touch-client-y')
+      expect(await touchMoveChangedTouchClientY.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchScreenX = await page.$('#touch-move-changed-touch-screen-x')
+      expect(await touchMoveChangedTouchScreenX.text()).toBe(touchMoveTouchTargetValue)
+      const touchMoveChangedTouchScreenY = await page.$('#touch-move-changed-touch-screen-y')
+      expect(await touchMoveChangedTouchScreenY.text()).toBe(touchMoveTouchTargetValue)
+
       await el.touchend({
-        touches: [],
+        touches: [{
+          identifier: 1,
+          pageX: 103,
+          pageY: 103,
+          clientX: 103,
+          clientY: 103,
+          screenX: 103,
+          screenY: 103
+        }],
         changedTouches: [{
           identifier: 1,
-          pageX: 101,
-          pageY: 101,
+          pageX: 103,
+          pageY: 103,
+          clientX: 103,
+          clientY: 103,
+          screenX: 103,
+          screenY: 103
         }, ],
       })
-      const data = await page.data()
-      expect(data.onTouchStartTime).toBeLessThanOrEqual(data.onTouchMoveTime);
-      expect(data.onTouchMoveTime).toBeLessThanOrEqual(data.onTouchEndTime);
+      const touchEndTouchTargetIdentifier = isAndroid ? '1.0' : '1'
+      const touchEndTouchTargetValue = isAndroid ? '103.0' : '103'
+      const touchEndTouchIdentifier = await page.$('#touch-end-touch-identifier')
+      expect(await touchEndTouchIdentifier.text()).toBe(touchEndTouchTargetIdentifier)
+      const touchEndTouchPageX = await page.$('#touch-end-touch-page-x')
+      expect(await touchEndTouchPageX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndTouchPageY = await page.$('#touch-end-touch-page-y')
+      expect(await touchEndTouchPageY.text()).toBe(touchEndTouchTargetValue)
+      const touchEndTouchClientX = await page.$('#touch-end-touch-client-x')
+      expect(await touchEndTouchClientX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndTouchClientY = await page.$('#touch-end-touch-client-y')
+      expect(await touchEndTouchClientY.text()).toBe(touchEndTouchTargetValue)
+      const touchEndTouchScreenX = await page.$('#touch-end-touch-screen-x')
+      expect(await touchEndTouchScreenX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndTouchScreenY = await page.$('#touch-end-touch-screen-y')
+      expect(await touchEndTouchScreenY.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchIdentifier = await page.$('#touch-end-changed-touch-identifier')
+      expect(await touchEndChangedTouchIdentifier.text()).toBe(touchEndTouchTargetIdentifier)
+      const touchEndChangedTouchPageX = await page.$('#touch-end-changed-touch-page-x')
+      expect(await touchEndChangedTouchPageX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchPageY = await page.$('#touch-end-changed-touch-page-y')
+      expect(await touchEndChangedTouchPageY.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchClientX = await page.$('#touch-end-changed-touch-client-x')
+      expect(await touchEndChangedTouchClientX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchClientY = await page.$('#touch-end-changed-touch-client-y')
+      expect(await touchEndChangedTouchClientY.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchScreenX = await page.$('#touch-end-changed-touch-screen-x')
+      expect(await touchEndChangedTouchScreenX.text()).toBe(touchEndTouchTargetValue)
+      const touchEndChangedTouchScreenY = await page.$('#touch-end-changed-touch-screen-y')
+      expect(await touchEndChangedTouchScreenY.text()).toBe(touchEndTouchTargetValue)
     }
   })
 
   it('click', async () => {
+    const el = await page.$('#longpress-target')
     await el.tap()
-    const data = await page.data()
-    expect(data.onTapTime).toBeLessThanOrEqual(data.onClickTime)
+    const targetX = isAndroid ? '0.0' : '0'
+    const targetY = isAndroid ? '0.0' : '0'
+    const tapEventX = await page.$('#tap-event-x')
+    expect(await tapEventX.text()).toBe(targetX)
+    const tapEventY = await page.$('#tap-event-y')
+    expect(await tapEventY.text()).toBe(targetY)
+    const clickEventX = await page.$('#click-event-x')
+    expect(await clickEventX.text()).toBe(targetX)
+    const clickEventY = await page.$('#click-event-y')
+    expect(await clickEventY.text()).toBe(targetY)
   })
 
   it('longPress', async () => {
-    if (process.env.uniTestPlatformInfo.startsWith('android') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
+    if (!process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
+      const el = await page.$('#longpress-target')
       await el.longpress()
-      const data = await page.data()
-      expect(data.onLongPressTime).toBeGreaterThan(0)
+      const longPressTouchTargetIdentifier = isAndroid ? '1.0' : '1'
+      const longPressTouchTargetValue = isAndroid ? '0.0' : '0'
+      const longPressTouchIdentifier = await page.$('#long-press-touch-identifier')
+      expect(await longPressTouchIdentifier.text()).toBe(longPressTouchTargetIdentifier)
+      const longPressTouchPageX = await page.$('#long-press-touch-page-x')
+      expect(await longPressTouchPageX.text()).toBe(longPressTouchTargetValue)
+      const longPressTouchPageY = await page.$('#long-press-touch-page-y')
+      expect(await longPressTouchPageY.text()).toBe(longPressTouchTargetValue)
+      const longPressTouchClientX = await page.$('#long-press-touch-client-x')
+      expect(await longPressTouchClientX.text()).toBe(longPressTouchTargetValue)
+      const longPressTouchClientY = await page.$('#long-press-touch-client-y')
+      expect(await longPressTouchClientY.text()).toBe(longPressTouchTargetValue)
+      const longPressTouchScreenX = await page.$('#long-press-touch-screen-x')
+      expect(await longPressTouchScreenX.text()).toBe(longPressTouchTargetValue)
+      const longPressTouchScreenY = await page.$('#long-press-touch-screen-y')
+      expect(await longPressTouchScreenY.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchIdentifier = await page.$('#long-press-changed-touch-identifier')
+      expect(await longPressChangedTouchIdentifier.text()).toBe(longPressTouchTargetIdentifier)
+      const longPressChangedTouchPageX = await page.$('#long-press-changed-touch-page-x')
+      expect(await longPressChangedTouchPageX.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchPageY = await page.$('#long-press-changed-touch-page-y')
+      expect(await longPressChangedTouchPageY.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchClientX = await page.$('#long-press-changed-touch-client-x')
+      expect(await longPressChangedTouchClientX.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchClientY = await page.$('#long-press-changed-touch-client-y')
+      expect(await longPressChangedTouchClientY.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchScreenX = await page.$('#long-press-changed-touch-screen-x')
+      expect(await longPressChangedTouchScreenX.text()).toBe(longPressTouchTargetValue)
+      const longPressChangedTouchScreenY = await page.$('#long-press-changed-touch-screen-y')
+      expect(await longPressChangedTouchScreenY.text()).toBe(longPressTouchTargetValue)
     }
   })
 })

pages/component/general-event/general-event.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" @touchstart="onTouchStart" @touchcancel="onTouchCancel" @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>identifier: {{touch.identifier}}</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>identifier: {{touch.identifier}}</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="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>
-          <text>identifier: {{touch.identifier}}</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 touchCancelEvent!.changedTouches" :key="index">
-          <text class="title3">touch[{{ index }}]:</text>
-          <text>identifier: {{touch.identifier}}</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>identifier: {{touch.identifier}}</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>identifier: {{touch.identifier}}</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="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>
-          <text>identifier: {{touch.identifier}}</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 longPressEvent!.changedTouches" :key="index">
-          <text class="title3">touch[{{ index }}]:</text>
-          <text>identifier: {{touch.identifier}}</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>identifier: {{touch.identifier}}</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>identifier: {{touch.identifier}}</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>
-  <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-<script lang="uts">
-  export default {
-    data() {
-      return {
-        title: 'general-event',
-        onTouchStartTime: 0,
-        touchStartEvent: null as TouchEvent | null,
-        touchCancelEvent: null as TouchEvent | null,
-        onTouchMoveTime: 0,
-        touchMoveEvent: null as TouchEvent | null,
-        onTouchEndTime: 0,
-        longPressEvent: null as TouchEvent | null,
-        touchEndEvent: null as TouchEvent | null,
-        onTapTime: 0,
-        tapEvent: null as PointerEvent | null,
-        onClickTime: 0,
-        clickEvent: null as PointerEvent | null,
-        onLongPressTime: 0,
-      }
-    },
-    methods: {
-      onTouchStart(e : TouchEvent) {
-        this.touchStartEvent = e
-        this.onTouchStartTime = Date.now()
-        console.log('onTouchStart')
-      },
-      onTouchCancel(e : TouchEvent) {
-        this.touchCancelEvent = e
-        console.log('onTouchCancel')
-      },
-      onTouchMove(e : TouchEvent) {
-        this.touchMoveEvent = e
-        this.onTouchMoveTime = Date.now()
-        console.log('onTouchMove')
-      },
-      onLongPress(e : TouchEvent) {
-        this.longPressEvent = e
-        this.onLongPressTime = Date.now()
-        console.log('onLongPress')
-      },
-      onTouchEnd(e : TouchEvent) {
-        this.touchEndEvent = e
-        this.onTouchEndTime = Date.now()
-        console.log('onTouchEnd')
-      },
-      onTap(e : PointerEvent) {
-        this.tapEvent = e
-        this.onTapTime = Date.now()
-        console.log('onTap')
-      },
-      onClick(e : PointerEvent) {
-        this.clickEvent = e
-        this.onClickTime = Date.now()
-        console.log('onClick')
-      },
-    },
-  }
-</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;
-  }
+<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: 'general-event',
+        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>