时间戳

首页 > 解决方案 > jQuery - 在鼠标单击或按住时为单元格着色

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

问题描述

我正在制定一项任务，通过制作 100 x 50 的单元格和 onlcick 来重新创建绘画类型，并为它们提供选定的背景颜色。但是为了使绘图更容易，用户应该能够按住鼠标按钮并拖动单元格以使它们填充背景颜色。只要他松开鼠标按钮，绘图就会停止，您将返回单击或必须再次按住鼠标按钮。

我试图用 .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});
    }
});

标签： javascriptjquery

解决方案

尝试监听 mouseover 事件并检查按钮是否被按下。它看起来像：

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

我为你做了一个简单的例子（不幸的是，在香草 JS 中，我不再使用 jQuery）： https ://codepen.io/DooMxDD/pen/RmWqjM

推荐阅读