Question

我想拥有Raphael.js提供的点击和拖动功能，例如：https://qiao.github.io/PathFinding.js/visual/。

你添加和删除障碍的方式很棒，它基本上结合了mousedown事件和悬停。但这究竟是怎么做到的呢？有什么帮助吗？

我最接近的是：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");
     });

如果你按下大号，然后将鼠标悬停在网格上，那就是我最接近的网格。

但我的问题是它只在这里悬停，我没有上述链接的点击功能

请发布仅包含vanilla JS的答案

Answer 1

您可以使用以下内容：

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

Answer 2

在每个元素上放置一个处理程序可能会感觉有些笨拙。我很想在主容器上放一个处理程序，然后从那里检查......

可能先添加一些代码来检查鼠标是否已关闭。

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

梳理＆＃34;点击＆＃34;和＆＃34;悬停＆＃34;永久性？

2 个答案: