React/JS 鼠标事件处理程序没有像我期望的那样工作答案

【问题标题】：React/JS mouse event handlers not working like I would expect itReact/JS 鼠标事件处理程序没有像我期望的那样工作
【发布时间】：2022-10-24 17:55:00
【问题描述】：

假设我有一个应用程序，例如：

  return (
    <div className="App">
      <button
        onMouseDown={(e) => console.log("down")}
        onMouseUp={(e) => console.log("up")}
        onMouseMove={(e) => console.log("move")}
      >
        test
      </button>
    </div>
  );
}

export default App;

有了这个最小的例子，我希望下按下鼠标按钮时仅触发一次，向上也有一次等等。但是我的控制台输出显示，在移动鼠标时，事情似乎变得一团糟？这里发生了什么？就像真正的输入是 mousedown->mousemove->mouseup 但控制台就像 mousedown->mousemove->mouseup->mousedown->mousemove->mouseup 这对我来说毫无意义......

非常感谢！

它是否是一个按钮并不重要（为了简单起见，我只是选择一个按钮）。

【问题讨论】：

标签： javascript reactjs events

【解决方案1】：

尝试这个：

const handleEvent = (e) => {
        if (e.type === "mousedown") {
            console.log('mouse down')
        } else if (e.type === "mouseup") {
            console.log('mouse up')
        } else if (e.type === "mouseleave") {
            console.log('mouse leave')

        }
return (<div>
                           <button
                            onMouseLeave={(e)=> handleEvent(e)}
                            onMouseMove={(e)=> handleEvent(e)}
                            onMouseUp={(e)=> handleEvent(e)}
                            onMouseDown={(e)=> handleEvent(e)}>
                               test
                            </button>
</div>

【讨论】：

感谢您的帮助，但是当我移动鼠标时（在真正存在的 mousedown 事件之后......），这个解决方案也会触发“随机”mousedown 事件
当您离开鼠标时，您只想获得一次事件吗？
实际上我不需要鼠标离开事件，我只需要当 mousedown 发生时的事件，然后我需要 mousemove 事件，最后是 mouseup 事件......我尝试为一些 react-svg 实现一些拖放行为（不想为此 simpe(?) 任务添加依赖项...）

【解决方案2】：

我换了鼠标，现在可以了！

似乎我的无线鼠标不知何故失去了连接，触发了mouseup 事件。当连接再次出现时，再次触发mousedown 事件......

四个小时的头痛得到了解决！

【讨论】：