From 855315f35049e6e6de433a11bf6c2c0de6eef192 Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Sun, 10 Sep 2023 05:45:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85event=E7=9A=84id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../general-event/general-event.uvue          | 444 ++++++++----------
 1 file changed, 189 insertions(+), 255 deletions(-)

diff --git a/pages/component/general-event/general-event.uvue b/pages/component/general-event/general-event.uvue
index de2c3650..333f8d25 100644
--- a/pages/component/general-event/general-event.uvue
+++ b/pages/component/general-event/general-event.uvue
@@ -1,270 +1,204 @@
 <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"
-          @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>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="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>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>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="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>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>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>
+  <!-- #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 -->
+  <!-- #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 MouseEvent | null,
-      onClickTime: 0,
-      clickEvent: null as MouseEvent | 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')
+  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 MouseEvent | null,
+        onClickTime: 0,
+        clickEvent: null as MouseEvent | null,
+        onLongPressTime: 0,
+      }
     },
-    onTouchMove(e: TouchEvent){
-      this.touchMoveEvent = e
-      this.onTouchMoveTime = Date.now()
-      console.log('onTouchMove')
+    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 : MouseEvent) {
+        this.tapEvent = e
+        this.onTapTime = Date.now()
+        console.log('onTap')
+      },
+      onClick(e : MouseEvent) {
+        this.clickEvent = e
+        this.onClickTime = Date.now()
+        console.log('onClick')
+      },
     },
-    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: MouseEvent){
-      this.tapEvent = e
-      this.onTapTime = Date.now()
-      console.log('onTap')
-    },
-    onClick(e: MouseEvent){
-      this.clickEvent = e
-      this.onClickTime = Date.now()
-      console.log('onClick')
-    },
-  },
-}
+  }
 </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;
-}
+  .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>
-- 
GitLab