Делаю ползунок на React, который можно перемещать в определенном диапазоне. Принцип простой: на ползунок вешаю onMouseDown который на document вешает mousemove и mouseup. В codepen все работает. Переношу на свой проект и все 3 события отрабатывают одновременно при отпускании кнопки мыши. Mousemove срабатывает 1 раз сколько бы я не водил мышкой.
Если в upHandler есть removeEventListener(), тогда mousemove вообще не выводится.
В чем может быть проблема? Как это побороть?
Проект создан через create-react-app. Пробовал на Опера, Chrome, Яндекс Браузере.
Вот пример, работает везде, но не у меня на проекте:
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, 0, 0, .2);
position: absolute;
top: -7px;
left: calc(50% - 10px);
}
<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="root"></div>