Merge pull request #2186 from zzc6332/fix-slider

fix: Slider bug (#2171)
DouyinFE · May 15, 2024 · 00e322d · 00e322d
2 parents 3a9d10a + 37715c8
commit 00e322d
Showing 1 changed file with 7 additions and 14 deletions.
diff --git a/packages/semi-ui/slider/index.tsx b/packages/semi-ui/slider/index.tsx
@@ -95,6 +95,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl: React.RefObject<HTMLSpanElement>;
     private dragging: boolean[];
     private eventListenerSet: Set<() => void>;
+    private handleDownEventListenerSet: Set<() => void>;
     foundation: SliderFoundation;
 
     constructor(props: SliderProps) {
@@ -124,6 +125,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         this.dragging = [false, false];
         this.foundation = new SliderFoundation(this.adapter);
         this.eventListenerSet = new Set();
+        this.handleDownEventListenerSet = new Set()
     }
 
     get adapter(): SliderAdapter {
@@ -208,9 +210,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             getMinHandleEl: () => this.minHanleEl.current,
             getMaxHandleEl: () => this.maxHanleEl.current,
             onHandleDown: (e: React.MouseEvent) => {
-                this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-                this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
-                this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
+                this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false));
+                this.handleDownEventListenerSet.add(this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false));
+                this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false));
             },
             onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback = noop, clickTrack = false, outPutValue): boolean | void => {
 
@@ -266,8 +268,8 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this.props.onMouseUp?.(e);
                 e.stopPropagation();
                 e.preventDefault();
-                document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
-                document.body.removeEventListener('mouseup', this.foundation.onHandleUp, false);
+                Array.from(this.handleDownEventListenerSet).forEach((clear) => clear())
+                this.handleDownEventListenerSet.clear()
             },
             onHandleUpAfter: () => {
                 const { currentValue } = this.state;
@@ -362,9 +364,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     onMouseLeave={() => {
                         this.foundation.onHandleLeave();
                     }}
-                    onMouseUp={e => {
-                        this.foundation.onHandleUp(e);
-                    }}
                     onKeyUp={e => {
                         this.foundation.onHandleUp(e);
                     }}
@@ -423,9 +422,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onMouseLeave={() => {
                             this.foundation.onHandleLeave();
                         }}
-                        onMouseUp={e => {
-                            this.foundation.onHandleUp(e);
-                        }}
                         onKeyUp={e => {
                             this.foundation.onHandleUp(e);
                         }}
@@ -479,9 +475,6 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         onMouseLeave={() => {
                             this.foundation.onHandleLeave();
                         }}
-                        onMouseUp={e => {
-                            this.foundation.onHandleUp(e);
-                        }}
                         onKeyUp={e => {
                             this.foundation.onHandleUp(e);
                         }}