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（在< EM>否则）。然后，对于所有后续的mouseenter事件，标志将始终为false，并且永远不会添加高亮类。

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

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

如果用户在行上快速移动鼠标，我仍然可能会因为鼠标过快而导致某些行错过 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');
});

当鼠标快速移动到桌面上时，单元格选择停止

1 个答案: