有没有办法在拖动光标和按下鼠标单击时将 CSS class 添加到 DOM 元素？

Question

我正在尝试创建一个 pathfinder 可视化工具。 到目前为止，我已经创建了一个具有以下功能的 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 class 被添加到该图块并填充黑色。

我的问题如下：

Is there a way to add the CSS wall class to the tiles while the mouse is pressed? Is there a special event listener for this?

这就是我想要达到的效果：

Answer 1

您可以使用 mousedown 事件来实现您要查找的内容。还有一个相应的mouseup事件。

这里还有所有事件的参考。

https://developer.mozilla.org/en-US/docs/Web/Events

Answer 2

您需要跟踪鼠标是否按下，并监听 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);
    }
  }
};

有没有办法在拖动光标和按下鼠标单击时将 CSS class 添加到 DOM 元素？

Is there a way to add a CSS class to a DOM element while dragging the cursor and mouse click pressed?

javascript

css

dom-events

typescript