fix: stop propagation for click control #690

daybrush · Jul 14, 2022 · 1a8f697 · 1a8f697
1 parent c937f4f
commit 1a8f697
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -608,7 +608,8 @@ export default class MoveableManager<T = {}>
     public onPreventClick = (e: any) => {
         e.stopPropagation();
         e.preventDefault();
-        removeEvent(window, "click", this.onPreventClick, true);
+        console.log("PRE");
+        // removeEvent(window, "click", this.onPreventClick, true);
     }
     public checkUpdateRect = () => {
         if (this.isDragging()) {

diff --git a/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts b/packages/react-moveable/src/react-moveable/gesto/getAbleGesto.ts
@@ -205,6 +205,8 @@ export function getAbleGesto(
     };
     const gesto = new Gesto(target!, options);
 
+    const isControl = eventAffix === "Control";
+
     ["drag", "pinch"].forEach(eventOperation => {
         ["Start", "", "End"].forEach(eventType => {
             gesto.on(`${eventOperation}${eventType}` as any, e => {
@@ -218,6 +220,8 @@ export function getAbleGesto(
 
                 if (!result) {
                     e.stop();
+                } else if (eventType === "Start" && isControl) {
+                    e?.inputEvent?.stopPropagation();
                 }
             });
         });

diff --git a/packages/react-moveable/stories/9Z-etc/apps/ClickApp.tsx b/packages/react-moveable/stories/9Z-etc/apps/ClickApp.tsx
@@ -7,17 +7,20 @@ export default function App(props: Record<string, any>) {
 
     return (
         <div className="root">
-            <div className="container">
+            <div className="container" onClick={() => {
+                console.log("Click");
+            }} onMouseDown={() => {
+                console.log("MouseDown");
+            }}>
                 <div className="target" ref={targetRef}>Target</div>
                 <Moveable
                     ref={moveableRef}
                     target={targetRef}
+                    resizable={true}
+                    preventClickDefault={true}
                     onDrag={e => {
                         e.target.style.transform = e.transform;
                     }}
-                    onClick={() => {
-                        alert("Click DragArea");
-                    }}
                 />
             </div>
         </div>