How to handle click and mousemove on the same dom element at the same time?

Question

JavaScript

How it is implemented and generally works.

const LONG_CLICK_TOLERANCE_MS = 250;
const HEIGHT_TOLERANCE = 45;

const getCurrentTimeMS = () => {
    return (new Date()).getTime();
};

const getClientY = (e) => {
    if (e.clientY !== undefined) {
        return e.clientY;
    }
    return e.touches[0].clientY;
};

const getDefaultMouseMove = () => {
    return {
        startedAtMS: null,
        y: null,
        initialHeight: null,
    };
};


    handleMoveStart = e => {
        this.mouseMove = {
            startedAtMS: getCurrentTimeMS(),
            y: getClientY(e),
            initialHeight: this.state.height,
        };
        document.addEventListener('mousemove', this.handleMoveProcess);
        document.addEventListener('touchmove', this.handleMoveProcess);
        document.addEventListener('mouseup', this.handleMoveEnd);
        document.addEventListener('touchend', this.handleMoveEnd);
    };

    handleMoveProcess = e => {
        if (this.mouseMove.startedAtMS === null) {
            return;
        }
        if (getCurrentTimeMS() - this.mouseMove.startedAtMS >= LONG_CLICK_TOLERANCE_MS) {
            const clientY = getClientY(e);
            const heightChange = this.mouseMove.y - clientY;
            const newHeight = this.mouseMove.initialHeight + heightChange;
            if (document.body.clientHeight < newHeight + HEIGHT_TOLERANCE * 1.5) {
                return;
            }
            if (newHeight < HEIGHT_TOLERANCE) {
                return;
            }
            this.setState({
                height: newHeight,
                isResizing: true,
            });
        }
    };

    handleMoveEnd = e => {
        if (getCurrentTimeMS() - this.mouseMove.startedAtMS < LONG_CLICK_TOLERANCE_MS) {
            const newValue = !this.props.open;
            this.setState({
                height: newValue ? parseInt(document.body.clientHeight / 2) : HEIGHT_TOLERANCE,
                isResizing: false,
            }, () => {
                this.props.onToggle(newValue);
            });
        }
        this.mouseMove = getDefaultMouseMove();
        document.removeEventListener('mousemove', this.handleMoveProcess);
        document.removeEventListener('touchmove', this.handleMoveProcess);
        document.removeEventListener('mouseup', this.handleMoveEnd);
        document.removeEventListener('touchend', this.handleMoveEnd);
    };

Thus, if the duration of clicking on a DOM element is longer than LONG_CLICK_TOLERANCE_MS, then handleMoveProcess starts changing the height of the element to be dragged. If the duration of pressing is shorter, then we consider that there was just a click and the dragging element opens to the desired height (half screen).
HEIGHT_TOLERANCE = 45 - the height by which the "tongue" of the element extends, which can be dragged or clicked to show it in its entirety.