我正在尝试获取一个网格，在单击并按住时用颜色填充 tds。
我已经将其设置为单击填充单个单元格的位置，但现在我试图让它在单击并按住时填充单元格。
我尝试过在 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>最佳答案
尝试使用 mousedown/mouseover/mouseup/mouseleave 如下所示。甚至不再需要点击。
mouseleave 是必需的，因为如果 #tableBody 离开它，就无法跟踪 mouseup。如果您将监听器挂接到 document 的 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;
}<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="11">
Grid Width:
<input type="number" id="inputWeight" name="width" min="1" value="11">
<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>关于javascript - 如何在 jQuery 中单击并按住时更改 td 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49088649/