javascript - 鼠标按下事件敏感度

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”事件在鼠标悬停在元素上方的每个循环上触发，而不仅仅是在悬停发生时触发。一旦单击元素触发一次，这将阻止进一步的逻辑运行。