我仍在进行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>您可以使用bind来绑定上下文。
row.addEventListener("mousedown", addWall.bind(null, r, c));
然后您可以获取行和列：
function addWall(row, cell) {
console.log("called:" + [row, 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>