Чувствительность к музею

Question

У меня есть сетка таблиц, которая подсвечивает ячейки / флажки с помощью функции щелчка и перетаскивания.

Когда пользователь нажимает на ячейку и некоторое время зависает, тогда ячейка / флажок часто мерцает (запускается много событий).

Есть ли способ сделать это менее чувствительным? то есть какое-то временное событие?

Я пытался добавить .delay к классу mouseover, но он действует странно.

 $(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");
              var checkBoxes = $(this).find('.dosearchescheckbox :checkbox').trigger('click');     
            }
          })
      $("#tablegrid").bind('selectstart', 'td.nohighlight', function() {    
            return false;
          })

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

Answer 1

Проблема здесь в том, что в обработчике наведения нет ничего, что мешало бы такому поведению. Я бы порекомендовал добавить внешнюю переменную, чтобы отслеживать ее, и обработчик 'mouseout', чтобы отслеживать конец события наведения, что-то вроде:

$(function () {
  let isMouseDown = false;
  let hasBeenClicked = false;
  let isHighlighted;
  $("#tablegrid").on('mousedown', 'td.nohighlight', function() {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    isHighlighted = $(this).hasClass("highlighted");
    if (hasBeenClicked === false) {
      $(this).find('.dosearchescheckbox :checkbox').trigger('click');
      hasBeenClicked = true;
    }
    return false; // prevent text selection
  })
  $("#tablegrid").on('mouseover', 'td.nohighlight', function() {
    if (isMouseDown) {
      $(this).toggleClass("highlighted");
      if (hasBeenClicked === false) {
        $(this).find('.dosearchescheckbox :checkbox').trigger('click');
        hasBeenClicked = true;
      }
    }
  })
  // May or may not need this part depending on your app design
  $("#tablegrid").on('mouseout', 'td.nohighlight', function() {
    hasBeenClicked = false;
  })
  $("#tablegrid").bind('selectstart', 'td.nohighlight', function() {    
    return false;
  })
  $(document).mouseup(function () {
    isMouseDown = false;
    hasBeenClicked = false;
  });
});

Основная суть в том, что она устанавливает переменную (hasBeenClicked) в значение true после однократного запуска клика. Затем он проверяет это, прежде чем снова запустить триггер. Причина этого заключается в том, что событие mouseover запускается в каждом цикле, где мышь находится над элементом, а не только когда происходит наведение. Это предотвращает запуск дальнейшей логики после срабатывания элемента click один раз.