javascript - 鼠标事件的触发点击与切换

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 在 mouseover 上始终为 true，因此将始终添加 highlighted 类，而复选框仍处于切换状态。

所以你可以直接打电话

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

参见toggleClass

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

相当于:

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