Расчесывать «щелчок» и «зависание» навсегда?

Question

Я хочу использовать функцию перетаскивания, которую предоставляет Raphael.js, например, здесь: https://qiao.github.io/PathFinding.js/visual/.

Способ добавления и удаления препятствий великолепен, он по сути объединяет события mousedown и hover.Но как же это сделать?Любая помощь, пожалуйста?

Ближайшее, что у меня есть: https://codepen.io/ProgrammingKea/pen/ZowWJx

Существенный бит

  div.addEventListener("mousedown", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mousemove", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mouseup", function(ev){
     this.classList.add("obstacle");
     });

Если вы нажмете большой, то наведите курсор наСетка, это самое близкое, что у меня есть.

Но моя проблема в том, что здесь он только зависает, у меня нет функции щелчка, указанной выше по ссылке

Пожалуйста, публикуйте ответы, содержащие только ванильJS

Answer 1

Может быть, немного неуклюже помещать обработчик на каждый элемент.Я хотел бы поместить обработчик в основной контейнер, а затем проверить оттуда ...

Может быть, сначала добавить немного кода, чтобы проверить, не работает ли мышь.

var main = document.getElementById('main')

var mouseDown = 0;
main.onmousedown = function() { 
  mouseDown=1;
}
main.onmouseup = function() {
  mouseDown=0;
}

Затем мы можем проверить, находится или нет мышь над событием ...

main.addEventListener('mouseover', mousecheck)
main.addEventListener('mousedown', mousecheck)

Затем мы предотвращаем дефолт (остановка перетаскивания).

Если мышь не работает, а элемент, на который воздействует, - это прямоугольник, мы изменим его цвет.

function mousecheck( ev ) {
  ev.preventDefault();
  if( mouseDown && ev.target.className.startsWith( 'box') ) {    
    ev.target.style.backgroundColor = ev.target.style.backgroundColor == "red" ? 'white' : 'red';
  }
}

Codepen

Answer 2

Вы можете использовать что-то вроде:

["mousedown", "mousemove", "mouseup"]
  .forEach(function (eve) {
    div.addEventListener(eve, function(ev){
      this.classList.add("obstacle");
    });
  });