javascript - 有没有办法在拖动光标并按下鼠标时将 CSS 类添加到 DOM 元素？

Question

我正在尝试创建一个探路者可视化工具。到目前为止，我已经创建了一个具有以下功能的 16x45 网格：

export const drawBoard = () => {
  const boardContainer: HTMLDivElement | null = document.querySelector(
    ".board-container"
  );

  if (boardContainer != null) {
    // 16x45 board
    for (let i = 0; i < 16; i++) {
      const row = document.createElement("div");
      row.classList.add("row");
      for (let j = 0; j < 45; j++) {
        const col = document.createElement("col");
        col.classList.add("col");
        col.setAttribute("data-row", `${i}`);
        col.setAttribute("data-col", `${j}`);
        row.appendChild(col);
        col.addEventListener("click", function () {
             this.classList.add("wall"); // Add a wall class to the CSS
        });
      }
      boardContainer.appendChild(row);
    }
  }
};

此函数在我的文档中生成以下网格：

我可以获得特定图块的x和y位置，如下所示：

我已经添加click events到所有这些瓷砖上。因此，当我单击一个图块时，一个wall CSS 类会添加到该图块并用黑色填充它。

我的问题如下：

有没有办法在wall按下鼠标时将 CSS 类添加到图块中？是否有一个特殊的事件监听器？

这就是我想要实现的目标：

标签： javascriptcsstypescriptdom-events

Answer 1

您需要跟踪鼠标是否按下，并监听mousemove. 像这样的东西应该工作：

//stores whether or not the mouse is down
let mouseDown = false;
document.addEventListener("mousedown" () => mouseDown = true);
document.addEventListener("mouseup" () => mouseDown = false);

export const drawBoard = () => {
  const boardContainer: HTMLDivElement | null = document.querySelector(
    ".board-container"
  );

  if (boardContainer != null) {
    // 16x45 board
    for (let i = 0; i < 16; i++) {
      const row = document.createElement("div");
      row.classList.add("row");
      for (let j = 0; j < 45; j++) {
        const col = document.createElement("col");
        col.classList.add("col");
        col.setAttribute("data-row", `${i}`);
        col.setAttribute("data-col", `${j}`);
        row.appendChild(col);
        
        //added mousemove listener
        col.addEventListener("mousemove", function() {
          //if mouse is down add class
          mouseDown && this.classList.add("wall")
        });
        col.addEventListener("click", function() {
          //do not need to check for mousedown
          this.classList.add("wall")
        });
      }
      boardContainer.appendChild(row);
    }
  }
};