feat: longPress

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

@@ -5,56 +5,139 @@
     <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
+          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">
+          <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>
+            <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>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>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>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"
+          >
+            <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">
+          <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>
+            <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>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">
@@ -81,6 +164,7 @@ export default {
       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,
@@ -100,6 +184,11 @@ export default {
       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()
@@ -115,10 +204,6 @@ export default {
       this.onClickTime = Date.now()
       console.log('onClick')
     },
-    onLongPress(){
-      this.onLongPressTime = Date.now()
-      console.log('onLongPress')
-    },
   },
 }
 </script>