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

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

1 个答案: