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

Question

我有一个函数可以根据鼠标事件将 td 单元格从突出显示切换为不突出显示。这很好用。

复选框触发的点击操作同时发生。但是，触发的点击似乎比切换事件更敏感。有时，当鼠标悬停在 td 单元格上时，复选框会闪烁 on/off...导致突出显示和复选框有时不同步。

如何最好地使切换类和触发点击同步？

$(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 上始终为真，因此将始终添加 highlighted class，同时复选框仍处于切换状态。

所以你可以打电话

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

见toggleClass

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

相当于：

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

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

Triggered click vs. toggle for mouse events

javascript

jquery

mouseevent

toggle