Javascript 鼠标向下事件敏感度

我有一个表格网格，通过点击和拖动功能突出显示单元格/复选框

当用户单击单元格并将其悬停一段时间时，单元格/复选框会闪烁很多（触发很多事件）

有没有办法让它变得不那么敏感？i、 例如，某种时间事件

我试着在mouseover toggleclass中添加.delay，但它的行为很奇怪

 $(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;
        });
});

---

这里的问题是，您的悬停处理程序中没有阻止这种行为的任何内容。我建议添加一个外部变量来跟踪它，并添加一个“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”事件会在鼠标位于元素上方的每个循环上触发，而不仅仅是在鼠标悬停时触发。这将阻止在单击元素触发一次后运行进一步的逻辑。

添加JSFIDLE以帮助您更好地执行操作