鼠標事件的觸發點擊與切換

Question

我有一個功能，可基於鼠標事件將td單元格從突出顯示切換為未突出顯示。 這很好。

復選框觸發的單擊操作會同時發生。 但是，似乎觸發的點擊比切換事件更敏感。 有時，當鼠標懸停在td單元上方時，復選框會閃爍開/關...導致突出顯示和復選框有時不同步。

如何最好地使toggleclass和觸發的Click保持同步？

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