将鼠标拖到附加项上时更改样式 div

Question

我正在尝试创建一个 "grid"，它由 div 组成并附加了 JS，当我将鼠标拖到每个 div 上时，我想要它的风格要改变。类似于使用普通 div 绘图，而不使用 canvas。这可能吗？

我编写了以下代码来附加 50 个元素，并使用了 mouseUp() 和 mouseDown() 事件侦听器。当我将鼠标按在任何元素上时，更改仅适用于第一个元素。

var c = document.createDocumentFragment();
    for (var i = 0; i < 50; i++) {
      var e = document.createElement("div");
        e.id = "box";
        e.className = "box";
        e.addEventListener("mousedown", mouseDown);
        e.addEventListener("mouseup", mouseUp);
        c.appendChild(e);
        }
    document.getElementById('container').appendChild(c);
    
 function mouseDown() {
   document.getElementById("box").innerHTML = "DOWN";
   document.getElementById("box").style.backgroundColor = "red";
   }
 function mouseUp() {
   document.getElementById("box").innerHTML = "UP";
   document.getElementById("box").style.backgroundColor = "black";
   }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 80px;
  height: 80px;
  background-color: #000;
  font-size: 15px;
  text-align: center;
  color: #fff;
}

.box:hover {
  background: blue !important;

}

.bg-blue {
  background: blue !important;
}

<div id="container"></div>

Answer 1

您可以将参数作为事件传递给事件侦听器，并使用它的目标来应用您想要的更改。如下所示：

    var c = document.createDocumentFragment();
    for (var i = 0; i < 50; i++) {
    var e = document.createElement("div");
    e.className = "box";
    e.addEventListener("mousedown", mouseDown);
    e.addEventListener("mouseup", mouseUp);
    c.appendChild(e);}
    document.getElementById('container').appendChild(c);
    function mouseDown(event) {
    event.target.innerHTML = "DOWN";
    event.target.style.backgroundColor = "red";}
    function mouseUp(event) {
    event.target.innerHTML = "UP";
    event.target.style.backgroundColor = "black";}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 80px;
  height: 80px;
  background-color: #000;
  font-size: 15px;
  text-align: center;
  color: #fff;
}

.box:hover {
  background: blue !important;

}

.bg-blue {
  background: blue !important;
}

<div id="container"></div>

将鼠标拖到附加项上时更改样式 div

Change style when dragging mouse over appended div

javascript

event-handling