mousedown 事件不连续，仅运行一次

Question

我正在尝试绘制类似墙的结构。让我解释一下：当发生 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 found = false;
const WALLCOLOR = "black", STARTCOLOR = "red", STOPCOLOR="green", VISITEDCOLOR="magenta",
CURRENTCOLOR="yellow"; // Try to implement arrow direction


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)+")");
}


function addWall(row, col)
{
 getCell(row, col).style.background = WALLCOLOR;
}


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.style.background = STARTCOLOR;
   else if(r == 10 && c == 40)
    cell.style.background = STOPCOLOR;
      
      cell.className = "gridsquare"; 
      cell.addEventListener("mousedown", addWall.bind(null, r, c));
      row.appendChild(cell); 
  } 
  e.appendChild(row); 
 }
}


function clearGrid()
{
 for(var i=0; i<20; i++) 
 {
     for(var j=0; j<60; j++) 
     {
      if(i == 10 && j == 20)
          getCell(i, j).style.background = STARTCOLOR;
         else if(i == 10 && j == 40)
          getCell(i, j).style.background = STOPCOLOR;
         else 
          getCell(i, j).style.background = "white";
         getCell(i, j).classList.remove("animateCell");
     }

 }
}

genDivs(20, gridCols);
console.log(found);
//dfs(11, 20);

<!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;
  }
  .animateCell
  {
   box-shadow: 0 1px 0 rgb(237, 12, 0) inset, 1px 0px 0px rgb(237, 12, 0) inset;
   background-color: yellow;
   animation-name: stretch;
   animation-duration: 1.5s; 
   animation-timing-function: ease-out; 
   animation-delay: 0;
   animation-fill-mode: none;
  }

  @keyframes stretch 
  {
   0% 
   {
    transform: scale(.0);
    background-color: red;
    border-radius: 100%;
   }
   50% 
   {
    background-color: orange;
   }
   80% 
   {
    transform: scale(1.2);
    background-color: pink;

   }
   100%
   {
    transform: scale(1)
    background-color: pink;
   }
  }
  button
  {
   position: absolute;
  }
 </style>
</head>
<body>
 <div id="gridContainer"></div>
 <!-- <button type = "button" onclick="DFSUtil(10, 20)"> Click </button> --> 
 <!-- <button type = "button" onclick="BFSUtil(10, 20)"> Click </button> -->
 <script type="text/javascript" src="HomeScript.js"></script>
 <script type="text/javascript" src="./Algorithms/DepthFirstSearch.js"></script>
 <script type="text/javascript" src="./Algorithms/BreadthFirstSearch.js"></script>

</body>
</html>

Answer 1

您需要在 mousedown 事件之后和 mouseup 事件之前监听 mousemove 事件 :)，（已编辑）

let canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  isDragging = false, cellSize = 25;

function drawRect(x, y, xl, yl, c) {
  ctx.fillStyle = c;
  ctx.fillRect(x, y, xl, yl);
}

function makeGrid(val, color, width, height) {
  ctx.beginPath();
  for(var x = 0; x <= height; x += val) {
    ctx.moveTo(0, x);
    ctx.lineTo(width, x);
    ctx.strokeStyle = color;
    ctx.stroke();
  }

  for(var y = 0; y <= width; y += val) {
    ctx.moveTo(y, 0);
    ctx.lineTo(y, height);
    ctx.strokeStyle = color;
    ctx.stroke();
  }
}

canvas.onmousedown = function(e) {
  let x = e.offsetX - e.offsetX % cellSize,
    y = e.offsetY - e.offsetY % cellSize;
    drawRect(x, y, cellSize, cellSize, "red");
  isDragging = true;
}

canvas.onmouseup = canvas.onmouseout = function() {
  isDragging = false;
}

canvas.onmousemove = function(e) {
  let x = e.offsetX - e.offsetX % cellSize,
    y = e.offsetY - e.offsetY % cellSize;
  if(isDragging) {
    drawRect(x, y, cellSize, cellSize, "red");
  }
}

makeGrid(cellSize, "blue", canvas.width, canvas.height);

canvas {
  box-shadow: 1px 1px 2px #ccc;
  border-radius: 5px;
  border: 2px solid blue;
}

<canvas width="300" height="200"></canvas>

Answer 2

也许这就是您正在寻找的绘制 div 网格的东西

let canvas = document.querySelector("#container"),
  isDragging = false;

canvas.onmousedown = function(e) {
  if(e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
    isDragging = true;
  }
}

canvas.onmouseup = canvas.onmouseleave = function() {
  isDragging = false;
}

document.body.ondragstart = function(e) {
  e.preventDefault();
}

canvas.onmouseover = function(e) {
  if(isDragging && e.target.nodeName === "DIV" && !e.target.id) {
    e.target.className = "black";
  }
}

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
#container div {
  border: 1px solid cyan;
  width: 25px;
  height: 25px;
  margin-bottom: 25px;
  border-bottom: none;
}
.black {
  background-color: black;
}

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

mousedown 事件不连续，仅运行一次

mousedown event is not continous and runs for a single time only

javascript

dom-events

mousedown