Question

如何阻止mousemove在同一个HTML表格单元格内触发，并且仅在我移动到下一个单元格时触发？

这适用于像素艺术类型的项目。我有这个功能，允许用户通过点击和拖动（改变单个单元格的背景颜色）来绘制table。它还允许擦除（奇数点击添加，甚至点击删除颜色）。

问题：点击单个单元格时，有时颜色会闪烁或根本不会发生变化。
诊断：在测试之后我意识到问题发生在mouseup事件在mousemove之后但在同一个单元格内发生时 - 即你的鼠标移动一点点，注册一个在mousemove之前mouseup。 mouseIsDown在同一个单元格中注册false并抵消颜色变化。

如何阻止这种情况发生？

// click and drag draw/erase function
function drag () {
    let mouseIsDown = true;
    let clicks = $(this).data('clicks');
    $('td')
    .on('mousemove', function(){
        if (mouseIsDown){
            if (!clicks){
                // Change background color of cell
                $(this).css('backgroundColor', selectedColor);
            } else {
                // On second click return color to default (erase)
                $(this).css('background-color', '');
            }
            // Fire `if` event on odd clicks
            $(this).data('clicks', !clicks);
        }
    })
    .on('mousedown', function(){
            event.preventDefault();
            mouseIsDown = true;
        })
        .on('mouseup', function(){
            mouseIsDown = false;
        });
    pixelCanvas.on('mouseleave', function(){
        mouseIsDown = false;
    });
}

// Event listener click delegated
pixelCanvas
    .on('click', 'td', draw)
    .on('mousedown', 'td', drag);

目前我最好的想法是存储起始和结束单元格索引，如果它在同一单元格中开始和结束，则可以使用它来设置不执行drag()的条件。但我不知道如何实现这一点，也不知道它是否有效。

任何解决方案或建议？

当我移动到下一个元素时，如何使`mousemove`触发？

0 个答案: