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

这里的问题是您的悬停处理程序中没有阻止这种行为的任何内容。我建议添加一个外部var来跟踪它，并添加一个“ 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元素被触发一次，就无法运行进一步的逻辑。

鼠标按下事件的敏感性

1 个答案: