当我完成拖动并且鼠标上升时，如何使我的可拖动 div 而不是运行 onClick 函数？

Question

所以我有一个可拖动的菜单 div。现在它几乎完美地工作，除了当我的鼠标上升时，它会触发 "onClick" 函数，该函数会触发一个模式弹出。我不希望发生这种情况。我希望该模式仅在单击时弹出，而不是在拖动后弹出。但是当我的鼠标拖动后上升时，我猜它是作为点击事件被触发的。

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

代码：

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

您可以测量自 < mouse.press > 和 < mouse.release > 以来经过的时间。
如果它不超过 ~100 毫秒，那么它可能是 "click" 而不是 "drag".

你也可以用一些 <Δ 位置 > (~10px)
实现 < mouse.position.change > （因此按下按钮时光标的轻微移动不会注册为 "drag"）。

如果结合这两个因素，确定它是 "click" 还是 "drag" 很容易。

Answer 2

我只想在单击时将 onClick 设置为 null 并设置 onMouseUp 以将 onClick 设置为您想要的任何功能：


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

当我完成拖动并且鼠标上升时，如何使我的可拖动 div 而不是运行 onClick 函数？

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

javascript

drag-and-drop

reactjs

当我完成拖动并且鼠标上升时，如何使我的可拖动 div 而不是 运行 onClick 函数？

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

javascript

drag-and-drop

reactjs

当我完成拖动并且鼠标上升时，如何使我的可拖动 div 而不是运行 onClick 函数？