2

演示

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 类。

4

1 回答 1

0

我认为选择逻辑错误地陷入了某种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。您可以使用自身的mousemove事件处理程序<table>来帮助解决这个问题。

该演示使用 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 的答案（https://stackoverflow.com/a/6195715/637889） ：在我查看此内容时，在 mousemove 事件期间检测按下的鼠标按钮非常有帮助。

编辑： 根据修改后的要求更新了演示：

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');
});
于 2013-08-02T15:34:53.427 回答