Javascript 在react代码中释放外部div时，为什么mouseup事件没有触发（使用window.addEventListener）

当我单击内部div时，是否有人能够突出显示mouseup事件未触发的原因，将光标（鼠标按钮仍然向下）拖动到div的外部，然后释放按钮？失败似乎也有点间歇性

这是一个react web应用程序

import * as React from 'react'
import './App.css'

class App extends React.Component {

  public handleMouseDown = (e:any) => {
    // tslint:disable-next-line:no-console
    console.log('handleMouseDown - add Listeners')      
    window.addEventListener('mouseup', this.handleMouseUp, true)
  }

  public handleMouseUp = (e:MouseEvent) => {
    // tslint:disable-next-line:no-console
    console.log('handleMouseUp - remove Listeners')      
    window.removeEventListener('mouseup', this.handleMouseUp, true);
  };  

  public render() {
    return (
      <div className="App" style={{ border: '1px solid blue', height:300, padding:50 }} >
        Main Div - Top
        <div 
          style={{ border: '1px solid black', height:100 }}
          onMouseDown={this.handleMouseDown}
        >
          Inside Div
        </div>        
        Main Div - Bottom
      </div>
    );
  }
}

export default App;

调试输出：

handleMouseDown - add Listeners
handleMouseUp - remove Listeners
handleMouseDown - add Listeners
handleMouseUp - remove Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners
handleMouseDown - add Listeners

---

为什么不单独附加事件：

onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}

---

我发现当把鼠标从Div内部拖到外部时，文本被选中并一起移动。这改变了鼠标事件的行为。我试着把

用户选择：无

到

.app

的css，并且它工作正常。看看我的代码：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.handleMouseUp=this.handleMouseUp.bind（this）；
this.handleMouseDown=this.handleMouseDown.bind（this）；
}
手把手向下（e）{
log（'handleMouseDown-addlisteners'）
window.addEventListener（'mouseup'，this.handleMouseUp，true）
}
扶手椅（e）{
log（'handleMouseUp-删除侦听器'）
window.removeEventListener（'mouseup'，this.handleMouseUp，true）；
} 
render（）{
返回(
主分区-顶部
内分区
主分区-底部
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
.App{
文本对齐：居中；
用户选择：无；
}

在Mac OS Chrome上进行了测试，效果很好。也许说明一下你的浏览器和操作系统？我在几台电脑上也遇到过同样的问题——我会通过重新启动/重新启动来重试——在Ubuntu firefox 64.0上测试的Chrome（顺便说一下，使用VSCode）中仍然存在问题。正如预期的那样，我已经在一些网站上看到了我正在使用的模式，我只是在遵循这些模式——我仍然有兴趣理解为什么它对我不起作用。。。e、 g.该概念是否存在根本问题？（例如）为我修复了它，谢谢-你明白为什么会这样吗？@Greg正如我解释的，当你拖动div时，它里面的文本也被移动了，所以它改变了
mouseup
事件的行为。因此，当使用
用户选择时，禁止选择文本：无，它工作正常。
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}