永久合并 "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");
     });

如果你按大，然后将鼠标悬停在网格上，这是我得到的最接近的。

但我的问题是它只能悬停在这里，我没有上面 link

的点击功能

请 post 仅包含 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)

然后我们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

永久合并 "click" 和 "hover"？

Combing "click" and "hover" permanently?

javascript

events

event-handling

raphael