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

Question

编辑:根据 mark.hch 的回答，我意识到这只是 Firefox 上的一个问题。为了澄清我在下面写的内容:我不是在寻求事件处理程序的帮助——那只是上下文。当按住 Shift 和 CTRL 键时，我特别需要复选框按钮在 Firefox 上工作。

我有一系列 JQuery-UI 复选框，事件处理程序已设置并正常工作。我希望能够在按下 shift/CTRL 按钮的同时单击复选框时更改行为。问题是，当我在按住复选框的同时单击复选框时，实际上什么也没有发生。

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

例如:https://jsfiddle.net/51c72b20/

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

然后添加您的 shift 按下跟踪:

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 中的行为很奇怪，因为当您按住 shift 键并单击一个按钮时，它的行为不正常……将对其进行调查，但不 promise 解决问题。