javascript - 当鼠标在表格上快速移动时，单元格选择停止

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 中。
我已经在 tr 类上处理了 mousedown、mouseenter 事件。

Answer 1

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

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

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

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

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

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');
});

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

注意:关于 https://stackoverflow.com/a/6195715/637889 的回答 ( jQuery: Detecting pressed mouse button during mousemove event )当我看到这个时非常有帮助。

编辑: 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');
});