From 1cfd47f43e24d1e355bbb301fbd8f8e5c292061f Mon Sep 17 00:00:00 2001
From: Rustin <rustinchi.alpha@gmail.com>
Date: Thu, 15 Aug 2024 10:22:05 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20sdk=20touch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/sdk/src/lib/dom/index.ts | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/sdk/src/lib/dom/index.ts b/packages/sdk/src/lib/dom/index.ts
index b04b24ca..6d25f895 100644
--- a/packages/sdk/src/lib/dom/index.ts
+++ b/packages/sdk/src/lib/dom/index.ts
@@ -25,10 +25,6 @@ export class HibitIdController {
     button.classList.add('hidden')
     button.addEventListener('mousedown', this.handleMouseDown)
     button.addEventListener('touchstart', this.handleTouchStart)
-    window.addEventListener('mouseup', this.handleMouseUp)
-    window.addEventListener('touchend', this.handleTouchEnd)
-    window.addEventListener('mousemove', this.handleMouseMove)
-    window.addEventListener('touchmove', this.handleTouchMove)
     container.appendChild(button)
     document.body.appendChild(container)
     
@@ -53,10 +49,6 @@ export class HibitIdController {
 
   public destroy = () => {
     this.container?.remove()
-    window.removeEventListener('mouseup', this.handleMouseUp)
-    window.removeEventListener('touchend', this.handleTouchEnd)
-    window.removeEventListener('mousemove', this.handleMouseMove)
-    window.removeEventListener('touchmove', this.handleTouchMove)
   }
 
   private handleClick = () => {
@@ -65,32 +57,47 @@ export class HibitIdController {
   }
 
   private handleMouseDown = (ev: MouseEvent) => {
+    ev.preventDefault()
     ev.stopPropagation()
     this.dragging = true
     this.mouseDownStartAt = Date.now()
+    window.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('mousemove', this.handleMouseMove)
   }
 
   private handleTouchStart = (ev: TouchEvent) => {
+    ev.preventDefault()
     ev.stopPropagation()
     this.dragging = true
+    this.mouseDownStartAt = Date.now()
     this.lastTouchPosition = { x: ev.touches[0].clientX, y: ev.touches[0].clientY }
+    window.addEventListener('touchend', this.handleTouchEnd)
+    window.addEventListener('touchmove', this.handleTouchMove)
   }
 
   private handleMouseUp = (ev: MouseEvent) => {
+    ev.preventDefault()
     ev.stopPropagation()
     this.dragging = false
     if (Date.now() - this.mouseDownStartAt < 200) {
       this.handleClick()
     }
+    window.removeEventListener('mouseup', this.handleMouseUp)
+    window.removeEventListener('mousemove', this.handleMouseMove)
   }
 
   private handleTouchEnd = (ev: TouchEvent) => {
+    ev.preventDefault()
     ev.stopPropagation()
     this.dragging = false
+    if (Date.now() - this.mouseDownStartAt < 200) {
+      this.handleClick()
+    }
+    window.removeEventListener('touchend', this.handleTouchEnd)
+    window.removeEventListener('touchmove', this.handleTouchMove)
   }
 
   private handleMouseMove = (ev: MouseEvent) => {
-    ev.preventDefault()
     ev.stopPropagation()
     if (this.dragging) {
       const rect = this.getBoundingRect()
@@ -103,7 +110,6 @@ export class HibitIdController {
   }
 
   private handleTouchMove = (ev: TouchEvent) => {
-    ev.preventDefault()
     ev.stopPropagation()
     if (this.dragging) {
       const movement = {