javascript - 永久组合 "click"和 "hover"？

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

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

也许首先添加一些代码来检查鼠标是否按下。

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)

然后我们 preventDefault(停止拖动)。

如果鼠标处于按下状态，并且正在操作的元素是一个框，那么我们将更改它的颜色。

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

Codepen