JavaScript Mousemove?

Question

[Григорий Дикий]

Доброго времени суток. Делаю slider "своими руками". Написал обработчики событий для mousemove, mouseup, mousedown, но иногда курсор сменяется на "на такой как когда перетаскиваешь изображение с html" и тогда очистка listener'а не срабатывает, видимо создается новое событие, которое я не знаю. Какое это может быть событие?

export default class UISlider {
  constructor(node) {
    this.slider = {};
    this.roller =  {};
    this.progress = {};
    this.line = {};
    this.moving = false;
    this.slider.node = node;

    this.createSliderElements();
    this.move = this.move.bind(this);
  }

  getElementPosition(node) {
    var elem = node;

    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
    var l = 0;
    var t = 0;

    while (elem) {
      l += elem.offsetLeft;
      t += elem.offsetTop;
      elem = elem.offsetParent;
    }

    return {"left": l, "top": t, "width": w, "height": h};
  }

  createSliderElements() {
    this.createChildNodes();
    this.slider = Object.assign({}, this.slider, this.getElementPosition(this.slider.node));
    this.roller = Object.assign({}, this.roller, this.getElementPosition(this.roller.node));
    // ТУТ ОБРАБОТКА СОБЫТИЙ
    this.slider.node.addEventListener('click', (event) => {
      this.render((event.screenX - this.slider.left) * 100 / this.slider.width);

    });

    this.roller.node.addEventListener('mousedown', (event) => {
      document.addEventListener('mousemove', this.move, false);
      document.addEventListener('mouseup', (event) => {
        document.removeEventListener('mousemove', this.move, false);
      });
    });
  }

  move(event) {
    this.render((event.screenX - this.slider.left) * 100 / this.slider.width);
  }

  createChildNodes() {
    this.line.node = document.createElement('div');
    this.line.node.classList.add('line');
    this.slider.node.appendChild(this.line.node);

    this.progress.node = document.createElement('div');
    this.progress.node.classList.add('progress');
    this.slider.node.appendChild(this.progress.node);

    this.roller.node = document.createElement('div');
    this.roller.node.classList.add('roller');
    this.slider.node.appendChild(this.roller.node);
  }

  render(percent) {
    if(percent > 100)
      percent = 100;
    if(percent < 0)
      percent = 0;

    this.roller.node.style.cssText = `left: ${this.slider.width * percent / 100}px`;
    this.progress.node.style.cssText = `width: ${this.slider.width * percent / 100}px`;
  }
}

Comments

[copal]

// ТУТ ОБРАБОТКА СОБЫТИЙ
// ТУТ ЖОПА! ПОЧИТАЙТЕ ПРО ОБРАБОТКУ СОБЫТИЙ!

[Григорий Дикий]

copal: В чем жопа? скажите как делать верно ? (буду признателен)

[copal]

Григорий Дикий: Вам ссылку дали на лучший ресурс, почитайте там. инача мне придется писать тоже самое, но зачем, когда уже все написано..

Answer 1

[Виталий Инчин ☢]

https://learn.javascript.ru/unselectable