时间戳

首页 > 解决方案 > 为什么在此反应代码中释放外部 div 时不会触发 mouseup 事件（使用 window.addEventListener）

javascript - 为什么在此反应代码中释放外部 div 时不会触发 mouseup 事件（使用 window.addEventListener）

问题描述

任何人都能够突出显示为什么当我单击内部 div 时没有触发 mouseup 事件，将光标（鼠标按钮仍然向下）拖动到 div 的外部，然后释放按钮？失败似乎也有些间歇性。

这是一个反应网络应用程序。

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;

应用程序.css

.App {
  text-align: center;
}

调试输出：

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

标签： javascriptreactjsaddeventlistener

解决方案

我发现当将鼠标从内部 div 拖动到外部时，文本被选中并一起移动。这改变了鼠标事件的行为。我尝试把user-select: none;to.app的 css 和它工作正常。看看我的代码：

class App extends React.Component {
	constructor() {
    super();
  	this.handleMouseUp = this.handleMouseUp.bind(this);
    this.handleMouseDown = this.handleMouseDown.bind(this);
  }
  handleMouseDown(e){
    console.log('handleMouseDown - add Listeners')      
    window.addEventListener('mouseup', this.handleMouseUp, true)
  }

  handleMouseUp(e) {
    console.log('handleMouseUp - remove Listeners')      
    window.removeEventListener('mouseup', this.handleMouseUp, true);
  } 
  
  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 Divn </div>
        Main Div - Bottom
      </div>
    )
  }
}

ReactDOM.render(
  <App  />,
  document.getElementById('container')
);
.App {
  text-align: center;
  user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

希望这会有所帮助。

推荐阅读