Триггерный щелчок против переключателя для событий мыши

Question

У меня есть функция, которая переключает ячейку td с выделенного на не подсвеченное в зависимости от событий мыши. Это хорошо работает.

Одновременно происходит срабатывание по нажатию флажка. Однако, похоже, что вызванный щелчок более чувствителен, чем событие переключения. Иногда флажок мигает вкл / выкл, когда мышь находится над ячейкой td ..., что приводит к тому, что подсветка и флажки иногда не синхронизируются.

Как лучше синхронизировать класс переключения и триггерный клик?

$(function () {
        var isMouseDown = false,isHighlighted;

      $("#tablegrid").on('mousedown', 'td.nohighlight', function() {
            isMouseDown = true;
            $(this).toggleClass("highlighted");
            isHighlighted = $(this).hasClass("highlighted");
            var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');
            return false; // prevent text selection
          })

      $("#tablegrid").on('mouseover', 'td.nohighlight', function() {
            if (isMouseDown) {
              $(this).toggleClass("highlighted", isHighlighted);
              var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');     
            }
          })
      $("#tablegrid").bind('selectstart', 'td.nohighlight', function() {    
            return false;
          })

      $(document)
        .mouseup(function () {
          isMouseDown = false;
        });
});

Answer 1

Поскольку второй параметр isHighlighted всегда равен true для mouseover, класс highlighted всегда будет добавлен, а флажок все еще установлен.

Таким образом, вы можете просто позвонить

$(this).toggleClass("highlighted");
// Instead of
// $(this).toggleClass("highlighted", isHighlighted);

См. toggleClass

$( "#foo" ).toggleClass( className, addOrRemove );

эквивалентно:

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}