如何解决反应 - mousemove 事件无法正常工作
我正在创建一个范围滑块,这就是它的工作原理:我已将 onMouseDown 事件添加到滑块 - 在函数中,我已将 onMouseMove 和 onMouseUp 事件附加到文档中 - 就是这样!简单的。它在 codepen.io 上完美运行,但在本地不可用。 我希望在控制台中看到日志“向下”,然后大量“移动”,最后得到“向上”消息。 但是释放鼠标按钮后同时出现的事件。
控制台日志:
问题出在哪里?如果出现如何解决?
我的项目是用 create-react-app 创建的。我在 Google Chrome 和 Opera 中运行它。
这是我的代码:
class Box extends React.Component {
downHandler = (e) => {
console.log('down');
document.addEventListener('mousemove',this.moveHandler);
document.addEventListener('mouseup',this.upHandler);
}
moveHandler = (e) => {
console.log('move');
}
upHandler = (e) => {
console.log('up');
document.removeEventListener('mousemove',this.moveHandler);
document.removeEventListener('mouseup',this.upHandler);
}
render() {
return (
<div className="container">
<div className="circle"
onMouseDown={this.downHandler}></div>
</div>
)
}
}
ReactDOM.render(<Box />,document.getElementById('root'));
.container{
width: 400px;
height: 7px;
background-color: #abc4f1;
position: relative;
margin-top: 120px;
}
.circle{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #eee;
box-shadow: 0 0 2px 2px rgba(0,.2);
position: absolute;
top: -7px;
left: calc(50% - 10px);
}
<div id="root"></div>
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。