为什么我的 Jquery mousedown 事件不起作用

Question

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Online Drawing Program</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="canvas"></div>
    <script src="script.js"></script>
  </body>
</html>

Javascript:

function drawingProgram(width, height) {
    this.width = width;
    this.height = height;
    this.mousedown = false;

    this.makeCanvas = function () {
        for (var row = 0; row <= this.height; row++) {
            $("#canvas").append("<div class='row' id='row" + row + "'></div>");
            for (var col = 0; col <= height; col++) {
                $("#row" + row).append("<div class='pixel'></div>");
            }
        }
    }

    this.draw = function (el) {
        console.log("drawing");
        $(el).css({ "background-color": "black" });
    }
}

var drawing = new drawingProgram(50, 50);
drawing.makeCanvas();

$("body").on("mousedown", function () { drawing.mousedown = true });
$("body").on("mouseup", function () { drawing.mousedown = false });

$(".pixel").on("mouseover", function () {
    if (drawing.mousedown) {
        drawing.draw(this);
    }
});

CSS:

.row {
    display:block;
    margin-top:-12px;
}

.pixel {
    user-select: none;
    flex-wrap:wrap;
    display:inline-block;
    width:5px;
    height:5px;
    border:1px solid black;
}

正在运行的程序在这里：https://online-drawing-program.powercoder.repl.co/ 问题：程序只使我的 canvas div 底部的像素变黑。它仅在我按下底部像素时进行检测。但是，我想检测我所有的像素 divs.

Answer 1

像素太小，还有其他CSS问题。

我添加了一个颜色选择器只是为了好玩。

function drawingProgram(width, height) {
  this.width = width;
  this.height = height;
  this.mousedown = false;
  this.color = "black"

  this.makeCanvas = function() {
    for (var row = 0; row <= this.height; row++) {
      $("#canvas").append("<div class='row' id='row" + row + "'></div>");
      for (var col = 0; col <= this.width; col++) {
        $("#row" + row).append("<div class='pixel'></div>");
      }
    }
  }

  this.draw = function(el) {
    console.log("drawing");
    $(el).css({
      "background-color": this.color
    });
  }

  return this
}

var drawing = new drawingProgram(20, 20);
drawing.makeCanvas();

$("body").on("mousedown", function(e) {
  drawing.mousedown = true
});
$("body").on("mouseup", function(e) {
  drawing.mousedown = false
});

$(".pixel").on("mouseover", function() {
  if (drawing.mousedown) {
    drawing.draw(this);
  }
});

$("#colorpicker div").on("click", function() {
  drawing.color = $(this).data("color")
})

#colorpicker {
  width: 100px;
  height: 20px;
  display: flex;
  border: 1px solid black;
}

#colorpicker div {
  display: block;
  width: 20px;
  height: 20px;
}

.row {
  display: block;
  margin: 0;
  line-height: 1;
  height: 12px;
}

.pixel {
  user-select: none;
  flex-wrap: wrap;
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="colorpicker">
  <div data-color="red" style="background-color: red;"></div>
  <div data-color="yellow" style="background-color: yellow;"></div>
  <div data-color="green" style="background-color: green;"></div>
  <div data-color="black" style="background-color: black;"></div>
  <div data-color="white" style="background-color: white;"></div>
</div>
<div id="canvas"></div>

建议

如果您想要一个绘图程序，那么您应该查看 canvas API - 这正是这些东西的用武之地。有关 canvas 的更多信息：

为什么我的 Jquery mousedown 事件不起作用

Why is my Jquery mousedown event not working

javascript

jquery

dom-events

建议