Question

我正在制作一个任务，通过制作100 x 50的单元格并通过点击为它们提供选定的背景色来重现绘画的种类。但是为了使绘图更容易，用户应该能够按住鼠标键并将其拖动到单元格上，以使其具有背景色。他释放鼠标按钮后，绘图应立即停止，您将回到单击状态，或者必须再次按住鼠标按钮。

我尝试使用.mousemove来做到这一点，但那没有解决。

// MAKING THE GRID
for (let i = 1; i <= 49; i++){
    $('#canvas').append('<tr id="table' + i + '"</tr>');
    for(let j = 1; j <= 100; j++){
        $('#table' + i).append('<td></td>');
    }
}

// ADDING A COLOR ON CLICK
$('td').click(function kleur(){
    if($(this).attr('style')){
        $(this).removeAttr('style')
    } else {
        $(this).attr('style', 'background-color:' + color);
    }
})

// SELECTING COLOR ON RIGHT CLICK
$('td').mousedown(function(e) {
    switch (event.which) {
        case 3:
        $('.popup').show();
        $('.popup').css({left: e.pageX});
        $('.popup').css({top: e.pageY});
    }
});

Answer 1

尝试收听鼠标悬停事件，并检查是否已按下按钮。看起来像这样：

$("#canvas").on("mouseover", function(e) {
if(e.buttons == 1)
 Draw(e.target);
});

我为您提供了一个简单的示例（不幸的是，在普通JS中，我不再使用jQuery）： https://codepen.io/DooMxDD/pen/RmWqjM

Answer 2

通过添加以下代码行得出结果。

// Adding the selected color to coloring function
function kleur(target) {
    target.style.backgroundColor = color;
}
// Coloring when mouse is held down
$("#canvas").on("mouseover", function(e) {
    if(e.buttons == 1)
     kleur(e.target);
});

jQuery-鼠标单击或按住时为单元格着色

2 个答案: