How to make my draggable div not run the onClick function when I finish dragging and my mouse goes up?

Question

So I have a menu div that is draggable. Right now it's working almost perfectly, except when my mouse goes up, it sets off the "onClick" function which triggers a modal to pop up. I don't want that to happen. I want that modal to pop up ONLY on click, not after dragging. But when my mouse goes up after dragging, I guess it is being triggered as a click event.

jsfiddle: https://jsfiddle.net/annahisenberg/ft10ersb/1/

Code:

constructor(props) {
    super(props);
    this.state = {
      x: this.props.x,
      y: this.props.y,
      showMoreOptionsPopup: false,
      showHelpModal: false
    };

    this.reff = React.createRef();
  }

  componentDidMount() {
    this.pos1 = 0;
    this.pos2 = 0;
    this.pos3 = 0;
    this.pos4 = 0;
  }

  dragMouseDown = e => {
    e.preventDefault();
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    document.onmouseup = this.closeDragElement;
    document.onmousemove = this.elementDrag;
  };

  elementDrag = e => {
    e.preventDefault();
    this.pos1 = this.pos3 - e.clientX;
    this.pos2 = this.pos4 - e.clientY;
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    this.setState({
      y: this.reff.current.offsetTop - this.pos2 + "px",
      x: this.reff.current.offsetLeft - this.pos1 + "px"
    });
  };

  closeDragElement = () => {
    document.onmouseup = null;
    document.onmousemove = null;
  };

  showMoreOptionsPopup = () => {
    this.setState({
      showMoreOptionsPopup: !this.state.showMoreOptionsPopup
    });
  };

render() {
    return (
      <div>
        {this.state.showMoreOptionsPopup && (
          <div
            id="more_options_popup"
            style={{
              left: this.reff.current.offsetLeft - 170 + "px",
              top: this.reff.current.offsetTop - 130 + "px"
            }}
          >
           Help Doc
          </div>
        )}

        <div
          id="more_options_button"
          onClick={this.showMoreOptionsPopup}
          style={{ left: this.state.x, top: this.state.y }}
          onMouseDown={this.dragMouseDown}
          ref={this.reff}
        >
          {this.state.showMoreOptionsPopup ? (
            <Icon name="close" />
          ) : (
            <Icon name="menu" />
          )}
        </div>
      </div>
    );
  }
}

Answer 1

You could measure the time that has passed since < mouse.press > and < mouse.release >.
If it has been no longer than ~100ms then it probably was a "click" and not a "drag".

---

You can also implement < mouse.position.change > with some < Δ position > (~10px)
(so that a slight movement of a cursor when pressing a button won't register as "drag").

---

If you combine both of those factors, determining whether it was a "click" or a "drag" is easy.

Answer 2

I would just, on click, set onClick to null and set onMouseUp to set onClick to whatever functionality you want:

<element onClick="" onMouseUp="this.onClick = <something>"></element>