在网格中添加 'mousedown' 事件侦听器，除非发生 'mouseup' 事件，否则将触发所有单元格

Question

我仍在处理我的 Graph Visualizer 项目，但我无法弄清楚如何向所有单元格添加 mousedown 事件侦听器。我正在尝试绘制类似墙的结构。让我解释一下，当 mousedown 事件发生时，单元格将变成一堵墙（我会添加一些颜色），除非 mouseup 事件发生，否则光标将经过的所有单元格也将变成一堵墙。我在这里面临两个问题：我能够为每个单元格添加一个事件侦听器，但我无法确定它是哪个单元格。另外，我想知道如何在 mousedown.

上创建连续墙

非常感谢任何建议或意见。

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left = (screen.width-25*gridCols)/screen.width * 50+"%";
var matrix = [];
var found = false;


function sleep(ms) 
{
 return new Promise(resolve => setTimeout(resolve, ms));
}

function getCell(row, col)
{
 return document.querySelector(".row:nth-child("+(row+1)+") .gridsquare:nth-child("+(col+1)+")");
}

for(var i=0; i<20; i++) 
{
    matrix[i] = [];
    for(var j=0; j<60; j++) 
        matrix[i][j] = false;
}

function addWall()
{
 console.log('called');
}

function genDivs(rows, cols)
{ 
 var e = document.getElementById("gridContainer");
 for(var r = 0; r < rows; r++)
 { 
  var row = document.createElement("div"); 
  row.className = "row";
  for(var c = 0; c < cols; c++)
  { 
   var cell = document.createElement("div"); 
   if(r == 10 && c == 20)
    cell.className = "gridsquare begin";
   else if(r == 10 && c == 40)
    cell.className = "gridsquare end";
      else
       cell.className = "gridsquare"; 
      row.appendChild(cell); 
      row.addEventListener("mousedown", addWall)
  } 
  e.appendChild(row); 
 }
}

async function dfs(i, j)
{
 if(found || i >= 20 || j >= 60 || i < 0 || j < 0 || matrix[i][j])
  return;
 if(i == 10 && j == 40)
 {
  found = true;
  return;
 }
 matrix[i][j] = true;
 getCell(i, j).style.background = "magenta";
 await sleep(5);
 await dfs(i+1, j);
 await dfs(i, j+1);
 await dfs(i-1, j);
 await dfs(i, j-1);
}

genDivs(20, gridCols);
//dfs(10, 10);

<!DOCTYPE html>
<html>
<head>
 <style>
  #gridContainer
  {
   outline: 1px solid rgb(175, 216, 248);
   font-size: 0;
   position: absolute;
  }
  .row
  {
   
  }
  .gridsquare
  {
   width: 25px;
   height: 25px;
   box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
   display: inline-block;
  }
  .begin
  {
   background-color: purple;
  }
  .end
  {
   background-color: magenta;
  }
 </style>
</head>
<body>
 <div id="gridContainer"></div>
 <script type="text/javascript" src="HomeScript.js"></script>
</body>
</html>

Answer 1

您可以使用 bind 来绑定上下文。

row.addEventListener("mousedown", addWall.bind(null, r, c));

然后就可以得到row和col:

function addWall(row, cell) {
  console.log("called:" + [row, cell]);
}

同时，我认为您需要在单元格而不是行上绑定方法。 Coz cell 您可以获得行和单元格 ID。

更新代码：

function addWallCell(row, cell) {
  console.log("called:" + [row, cell]);
}

绑定单元格：

// rest of code
else cell.className = "gridsquare";
cell.addEventListener("mousedown", addWallCell.bind(null, r, c));
row.appendChild(cell);

工作样本：

var gridCols = 60;
var gridRows = Math.floor(screen.height / 25) - 2;
gridContainer.style.left =
  ((screen.width - 25 * gridCols) / screen.width) * 50 + "%";
var matrix = [];
var found = false;

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function getCell(row, col) {
  return document.querySelector(
    ".row:nth-child(" + (row + 1) + ") .gridsquare:nth-child(" + (col + 1) + ")"
  );
}

for (var i = 0; i < 20; i++) {
  matrix[i] = [];
  for (var j = 0; j < 60; j++) matrix[i][j] = false;
}

function addWall(row, cell) {
  console.log("called:" + [row, cell]);
}
function addWallCell(row, cell) {
  console.log("called:" + [row, cell]);
}

function genDivs(rows, cols) {
  var e = document.getElementById("gridContainer");
  for (var r = 0; r < rows; r++) {
    var row = document.createElement("div");
    row.className = "row";
    for (var c = 0; c < cols; c++) {
      var cell = document.createElement("div");
      if (r == 10 && c == 20) cell.className = "gridsquare begin";
      else if (r == 10 && c == 40) cell.className = "gridsquare end";
      else cell.className = "gridsquare";
      cell.addEventListener("mousedown", addWallCell.bind(null, r, c));
      row.appendChild(cell);
    //   row.addEventListener("mousedown", addWall.bind(null, r, c));
    }
    e.appendChild(row);
  }
}

async function dfs(i, j) {
  if (found || i >= 20 || j >= 60 || i < 0 || j < 0 || matrix[i][j]) return;
  if (i == 10 && j == 40) {
    found = true;
    return;
  }
  matrix[i][j] = true;
  getCell(i, j).style.background = "magenta";
  await sleep(5);
  await dfs(i + 1, j);
  await dfs(i, j + 1);
  await dfs(i - 1, j);
  await dfs(i, j - 1);
}

genDivs(20, gridCols);

#gridContainer {
  outline: 1px solid rgb(175, 216, 248);
  font-size: 0;
  position: absolute;
}

.row {}

.gridsquare {
  width: 25px;
  height: 25px;
  box-shadow: 0 1px 0 rgb(175, 216, 248) inset, 1px 0px 0px rgb(175, 216, 248) inset;
  display: inline-block;
}

.begin {
  background-color: purple;
}

.end {
  background-color: magenta;
}

<div id="gridContainer"></div>

在网格中添加 'mousedown' 事件侦听器，除非发生 'mouseup' 事件，否则将触发所有单元格

Adding 'mousedown' event listener in a grid which will trigger all cells unless 'mouseup' event occurs

javascript

dom-events

mousedown