feat: prevent click bubbling #89

daybrush · Aug 2, 2022 · 6538396 · 6538396
1 parent 30575a1
commit 6538396
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git a/packages/selecto/CHANGELOG.md → CHANGELOG.md b/packages/selecto/CHANGELOG.md → CHANGELOG.md
diff --git a/packages/selecto/package.json b/packages/selecto/package.json
@@ -1,6 +1,6 @@
 {
     "name": "selecto",
-    "version": "1.17.0",
+    "version": "1.18.0",
     "description": "Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.",
     "main": "./dist/selecto.cjs.js",
     "module": "./dist/selecto.esm.js",

diff --git a/packages/selecto/src/SelectoManager.tsx b/packages/selecto/src/SelectoManager.tsx
@@ -357,7 +357,13 @@ class Selecto extends EventEmitter<SelectoEvents> {
 
         const target = this.target;
 
-        const { dragContainer, checkInput, preventDefault } = this.options;
+        const {
+            dragContainer,
+            checkInput,
+            preventDefault,
+            preventClickEventOnDragStart,
+            preventClickEventOnDrag,
+        } = this.options;
         this.dragContainer =
             typeof dragContainer === "string"
                 ? [].slice.call(document.querySelectorAll(dragContainer))
@@ -367,6 +373,8 @@ class Selecto extends EventEmitter<SelectoEvents> {
             container: window,
             checkInput,
             preventDefault,
+            preventClickEventOnDragStart,
+            preventClickEventOnDrag,
         }).on({
             dragStart: this._onDragStart,
             drag: this._onDrag,
@@ -968,10 +976,10 @@ class Selecto extends EventEmitter<SelectoEvents> {
         if (inputEvent && !e.isClick) {
             this.emit("dragEnd", {
                 isDouble: !!e.isDouble,
+                isClick: !!e.isClick,
                 isDrag: false,
                 isSelect: selectFlag,
                 ...e,
-                isClick: !!e.isClick,
                 rect,
             });
         }

diff --git a/packages/selecto/src/consts.ts b/packages/selecto/src/consts.ts
@@ -46,6 +46,8 @@ export const OPTIONS = [
     // ignore target, container,
     "dragContainer",
     "cspNonce",
+    "preventClickEventOnDrag",
+    "preventClickEventOnDragStart",
     ...PROPERTIES,
 ] as const;
 
@@ -73,6 +75,8 @@ export const OPTION_TYPES: { [key in keyof SelectoOptions]: any } = {
     dragCondition: Function,
     clickBySelectEnd: Boolean,
     continueSelectWithoutDeselect: Boolean,
+    preventClickEventOnDragStart: Boolean,
+    preventClickEventOnDrag: Boolean,
 };
 
 /**

diff --git a/packages/selecto/src/types.ts b/packages/selecto/src/types.ts
@@ -121,6 +121,16 @@ export interface SelectoOptions {
      * @default null
      */
     dragCondition: ((e: OnParentDragStart) => boolean) | null;
+    /**
+     * Prevent click event on drag. (mousemove, touchmove)
+     * @default false
+     */
+    preventClickEventOnDrag?: boolean;
+    /**
+     * Prevent click event on dragStart. (mousedown, touchstart)
+     * @default false
+     */
+    preventClickEventOnDragStart?: boolean;
     /**
      * Selection Element to apply for framework.
      * @private
@@ -213,6 +223,8 @@ export interface OnDragEvent {
     deltaY: number;
     distX: number;
     distY: number;
+    isMouseEvent: boolean;
+    isSecondaryButton: boolean;
     isClick?: boolean;
     isDouble?: boolean;
     inputEvent: any;

diff --git a/packages/selecto/test/manual/index.html b/packages/selecto/test/manual/index.html
@@ -48,6 +48,7 @@
 
 <div class="hi"></div>
 <script>
+
 const selecto = new Selecto({
     container: document.body,
     // rootContainer: document.body,