Question

我正在尝试通过点击并按住来获取网格以填充颜色。

我有一个点击填充单个单元格的地方，但现在我试图让它在点击时填充单元格并保持。

我尝试在mouseup，mousedown和mousehover上使用事件监听器，但我似乎找不到合适的组合来使其正常工作。有什么指导吗？

// Single page app to create a grid and fill it with color
// when clicked

// function to make canvas
function makeGrid(height, width) {
  for (i = 0; i < height; i++){
    $('#tableBody').prepend('<tr></tr>');
  }
  for (j = 0; j < width; j++){
      $('tr').append('<td></td>');
  }
}

$(':submit').on('click', function(e) {
  $('#tableBody').empty(); //empty out any existing grid
  e.preventDefault(); //Prevent resetting everything on click
  let height = $('#inputHeight').val(); //get height of canvas
  let width = $('#inputWeight').val(); // get width of canvas
  makeGrid(height, width); // Generate Canvas
}); 

// This code works to fill the td's with color on a click
$('#tableBody').on('click', 'td', function() {
  $(this).css('background', $('#colorPicker').val());
});

// I'm trying to get the color to fill if the mouse is down
// and has not been released, started with this code and
// tried a few other ways but can't get it to work

// var mousedown = false;

// $(document).mousedown( function () { mousedown = true;});
// $(document).mouseup( function() { mousedown = false; });

// $('td').on('mousedown', function() {
//   $(this).css('background', $('#colorPicker').val());
// });

// $('#tablebody td').on('mouseover', function() {
//   if (mousedown) {
//     $(this).css('background', $('#colorPicker').val());
//   }
// });

body {
    text-align: center;
    font-family: "Open Sans", sans-serif;
}

h1 {
    font-family: 'Griffy', cursive;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
    font-weight: 100;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

div#selections {
    border: 1px solid black;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 15px;
    background-color: whitesmoke;
    border-radius: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link href="https://fonts.googleapis.com/css?family=Griffy" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>
    <div id='selections'>
        <h2>Choose Grid Size</h2>
        <form id="sizePicker">
            Grid Height:
            <input type="number" id="inputHeight" name="height" min="1" value="1">
            Grid Width:
            <input type="number" id="inputWeight" name="width" min="1" value="1">
            <input type="submit">
        </form>

        <h2>Pick A Color</h2>
        <input type="color" id="colorPicker">
    </div>

    <h2>Design Canvas</h2>
    <table id="pixelCanvas">
        <tbody id="tableBody">

        </tbody>
    </table>

    <script src="designs.js"></script>
</body>
</html>

Answer 1

尝试使用mousedown / mouseover / mouseup / mouseleave，如下所示。 <{1}}甚至不再需要了。

click是必需的，因为mouseleave如果离开#tableBody则无法跟踪mouseup。如果您将听众挂钩到document的{{1}}，则可以将其删除。

mouseup

// Single page app to create a grid and fill it with color
// when clicked

// function to make canvas
function makeGrid(height, width) {
  for (i = 0; i < height; i++){
    $('#tableBody').prepend('<tr></tr>');
  }
  for (j = 0; j < width; j++){
      $('tr').append('<td></td>');
  }
}

$(':submit').on('click', function(e) {
  $('#tableBody').empty(); //empty out any existing grid
  e.preventDefault(); //Prevent resetting everything on click
  let height = $('#inputHeight').val(); //get height of canvas
  let width = $('#inputWeight').val(); // get width of canvas
  makeGrid(height, width); // Generate Canvas
}); 

// This code works to fill the td's with color on a click
//$('#tableBody').on('click', 'td', function() {
//  $(this).css('background', $('#colorPicker').val());
//});

(function () {
  var isMouseDown = false;
  $('#tableBody')
    .on('mousedown', 'td', function() {
      isMouseDown = true;
      $(this).css('background', $('#colorPicker').val());
    })
    .on('mouseover', 'td', function() {
      if (isMouseDown)
      $(this).css('background', $('#colorPicker').val());
    })
    .on('mouseup', 'td', function() {
      isMouseDown = false;
    })
    .on('mouseleave', function() {
      isMouseDown = false;
    });;
})();

body {
    text-align: center;
    font-family: "Open Sans", sans-serif;
}

h1 {
    font-family: 'Griffy', cursive;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
    font-weight: 100;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

div#selections {
    border: 1px solid black;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 15px;
    background-color: whitesmoke;
    border-radius: 25px;
}

如何在点击并按住时更改jQuery中的td颜色

1 个答案: