Question

编辑：从mark.hch的回答中我意识到这只是Firefox上的一个问题。为了澄清我在下面写的内容：我没有向事件处理程序寻求帮助 - 这只是上下文。当拿着shift和CTRL键时，我特别需要使用复选框按钮来处理Firefox。

我有一系列JQuery-UI复选框，其中设置了一个事件处理程序并且工作正常。我希望能够在按下shift / CTRL按钮时单击复选框时更改行为。问题是，当我按住它们时单击复选框时实际上没有发生任何事情。

在我看来，按钮被选中/突出显示而不是点击。如何在按下shift键时停止此操作并注册咔嗒声？

  <script>
  $(function() {
    $( "#format" ).buttonset();
  });
  </script>


<div id="format">
  <input type="checkbox" id="check1"><label for="check1">Alpha</label>
  <input type="checkbox" id="check2"><label for="check2">Bravo</label>
  <input type="checkbox" id="check3"><label for="check3">Charlie</label>
</div>

Answer 1

您可以使用CSS属性禁用文本选择（请参阅：How to disable text selection highlighting using CSS?）。

将此CSS添加到#format元素中，如下所示：

#format{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

然后添加你的班次按键跟踪：

var shiftDown = false;
$(document).on('keydown', function(e){
    if(e.which == 16 && !shiftDown){ shiftDown = true; }
});
$(document).on('keyup', function(e){
    if(e.which == 16 && shiftDown){ shiftDown = false; } 
});

最后添加您的点击方法并确定是否正在进行轮班：

$('#format label').on('click', function(){
    if(shiftDown){
        //$(this) was clicked while shift was down
    }
    else{
        //$(this) was clicked while shift was not down   
    }
});

最终结果：https://jsfiddle.net/55wpdp4d/

注意：最终结果在Firefox中表现奇怪，因为当您移动+单击一个按钮时，它的行为不正常......会调查它，但不会对解决方案做出承诺。

Firefox：按Shift或CTRL时未选中JQuery-UI复选框

1 个答案: