当鼠标在桌子上快速移动时单元格选择停止

Question

Demo

var flag=false;

$(document).live('mouseup', function () { flag = false; });
var colIndex; var lastRow;
$(document).on('mousedown', '.csstablelisttd', function (e) {
    //This line gets the index of the first clicked row.
    lastRow = $(this).closest("tr")[0].rowIndex;    

    var rowIndex = $(this).closest("tr").index();
    colIndex = $(e.target).closest('td').index();
    $(".csstdhighlight").removeClass("csstdhighlight");
    if (colIndex == 0 || colIndex == 1) //)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL. 
        return;
    if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false)
    {
        $('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');

        flag = true;
        return false;
    }     
});


document.onmousemove = function () { return false; };

$(".csstablelisttd").live('mouseenter', function (e) {
    // Compares with the last and next row index.
    var currentRow = $(this).closest("tr")[0].rowIndex;
    var currentColoumn = $(e.target).closest('td').index();

    // cross row selection
    if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
    {
        lastRow = $(this).closest("tr")[0].rowIndex;
    }
    else
    {
        flag = false;
        return;
    }
    // cross cell selection.
    if (colIndex != currentColoumn)
    {
        flag = false;
        return;
    }

    if (flag)
    {
        $('#contentPlaceHolderMain_tableAppointment tr').eq(currentRow).find('td').eq(currentColoumn).addClass('csstdhighlight');
        e.preventDefault();                     
        return false;
    }                          
});

当我在表格上快速移动光标时，单元格选择停止。
在表格单元格上快速移动光标时，我应该怎么做才能防止选择停止。
我不想更改页面的 html。
该问题主要发生在 IE 7 中。
我已经处理了事件 mousedown, mouseenter on tr 类。

Answer 1

我认为 选择逻辑 错误地卡在了 flag = false 状态。

当鼠标快速移动时，lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1 将评估为 false，因为 currentRow 不在 lastRow 旁边，因此 flag 设置为 false（在 else 中） .然后对于所有后续的mouseenter 事件标志将始终为 false，并且永远不会添加高亮类。

该问题也出现在 Chrome 上，我认为在 IE7 上更为明显，因为 IE7 中的 JavaScript 引擎要慢得多。我认为 JavaScript 相当复杂，而且应该避免使用 .live() jQuery 函数，因为它在 jQuery 1.9 中已被删除。 .on()（您已经在另一个事件绑定中使用过）现在是首选方法。

如果按住鼠标左键，我提供了另一种方法来突出显示每行的最后一个表格单元格，这要简单得多。如果我正确理解了代码，唯一缺少的功能是检查当前行是否在前一行的任一侧，因为我看不出进行这种额外检查的充分理由。

如果用户在行上快速移动鼠标，我希望某些行错过 mouseenter 事件，因为鼠标太快了。您可以在<table> 本身上使用mousemove 事件处理程序来帮助解决这个问题。

demo 使用的是 jQuery 1.9.1，为了更好的演示代码，我还去掉了表格高度。

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');

$table.on('mouseenter', 'td:last-child', function(e) {
    if (e.which === 1) {
        $(this).addClass('csstdhighlight');
    }
}).on('click', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});

如有必要，我很乐意更详细地解释我的示例代码 :-)

注意：jQuery: Detecting pressed mouse button during mousemove event 上的答案 (https://stackoverflow.com/a/6195715/637889) 在我查看此内容时非常有帮助。

编辑： Updated demo 基于修改后的要求：

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');
var startIndex = -1;
var direction = 0;

$table.on('mouseenter', 'td:last-child', function(e) {
    var $this = $(this);
    var rowIndex = $this.parent().index();
    if (direction === 0 && startIndex != -1) {
        direction = rowIndex > startIndex ? 1 : -1;
    }

    if (e.which === 1 && (
        (direction === -1 && rowIndex < startIndex) ||
        (direction === 1 && rowIndex > startIndex))
       ) {
        $(this).addClass('csstdhighlight');
    }
}).on('mousedown', 'td:last-child', function() {
    var $this = $(this);
    startIndex = $this.parent().index();

    $this.addClass('csstdhighlight');
}).on('mouseup', 'td:last-child', function() {
    direction = 0;
    startIndex = -1;
}).on('click', 'td:last-child', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});