выбор клеток останавливается, когда мышь двигаться быстро на столе

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 на tr-классе.

Answer 1

Я думаю, что логика выбора неверно застревает в состоянии flag = false.

При перемещении мыши быстро lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1 будет вычисляться false поскольку currentRow не рядом с lastRow, поэтому flag установлен в false (в еще). Затем для всех последующих событий mouseenter флаг всегда будет ложным, а класс выделения никогда не будет добавлен.

Проблема возникает и в Chrome, и я предполагаю, что это намного более заметно в IE7, поскольку в IE7 механизм JavaScript намного медленнее. Я думаю, что JavaScript довольно сложный, а также следует избегать функции jQuery .live(), поскольку она была удалена в 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 было очень полезно, когда я смотрел на это.

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