补充event的id

pages/component/general-event/general-event.uvue

@@ -2,174 +2,105 @@
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
   <!-- #endif -->
-    <view>
-      <page-head :title="title"></page-head>
+    <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 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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <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"
-          >
+        <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
-            >
+          <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+          <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
         </template>
       </view>
       <view v-if="tapEvent !== null">
@@ -181,13 +112,12 @@
         <text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
       </view>
     </view>
-    </view>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 <script lang="uts">
-export default {
+  export default {
     data() {
       return {
         title: 'general-event',
@@ -207,64 +137,68 @@ export default {
       }
     },
     methods: {
-    onTouchStart(e: TouchEvent){
+      onTouchStart(e : TouchEvent) {
         this.touchStartEvent = e
         this.onTouchStartTime = Date.now()
         console.log('onTouchStart')
       },
-    onTouchCancel(e: TouchEvent){
+      onTouchCancel(e : TouchEvent) {
         this.touchCancelEvent = e
         console.log('onTouchCancel')
       },
-    onTouchMove(e: TouchEvent){
+      onTouchMove(e : TouchEvent) {
         this.touchMoveEvent = e
         this.onTouchMoveTime = Date.now()
         console.log('onTouchMove')
       },
-    onLongPress(e: TouchEvent){
+      onLongPress(e : TouchEvent) {
         this.longPressEvent = e
         this.onLongPressTime = Date.now()
         console.log('onLongPress')
       },
-    onTouchEnd(e: TouchEvent){
+      onTouchEnd(e : TouchEvent) {
         this.touchEndEvent = e
         this.onTouchEndTime = Date.now()
         console.log('onTouchEnd')
       },
-    onTap(e: MouseEvent){
+      onTap(e : MouseEvent) {
         this.tapEvent = e
         this.onTapTime = Date.now()
         console.log('onTap')
       },
-    onClick(e: MouseEvent){
+      onClick(e : MouseEvent) {
         this.clickEvent = e
         this.onClickTime = Date.now()
         console.log('onClick')
       },
     },
-}
+  }
 </script>
 
 <style>
-.container {
-  padding-bottom: 1000px;
-}
-.target {
+  .container {
+    padding-bottom: 10px;
+  }
+
+  .target {
     margin: 20px 0 0 50px;
     width: 200px;
     height: 100px;
     background-color: aqua;
-}
-.title1 {
+  }
+
+  .title1 {
     margin-top: 15px;
     font-size: 20px;
-}
-.title2 {
+  }
+
+  .title2 {
     margin-top: 10px;
     font-size: 18px;
-}
-.title3 {
+  }
+
+  .title3 {
     margin-top: 5px;
     font-size: 16px;
-}
+  }
 </style>