将CTRL 单击事件传递到Firefox中的另一个元素

Question

我了解，Firefox不会将CTRL 从标签中传递给目标输入字段。我对如何实现这种行为感到茫然。我有隐藏的复选框字段，其各自的标签是独特和可见的……在单击标签时，单击寄存器，但控制点击却没有。

Answer 1

我假设html为

<form>
 <label for="home" id="lblhome">home</label>
 <input type="checkbox" name="home" id="home"><br>
</form>

我想要一件事，如果Ctrl Clikik clik clike ofer of of checkbox，请单击"复选框"

$( "#home" ).click( function( e) {
if(e.ctrlKey)
  alert('i just got ctrl+cliked');
else
 alert('i just got clicked');
});

因此，现在创建标签的Handler检查是否是Ctrl 单击如果是的，则创建一个jQuery事件，然后将其 ctrlkey 属性更改为true和触发在复选框上。

$('#lblhome').click(
function(e){
  if(e.ctrlKey) {
    alert('ctrl+click on label');
    //cancel the normal click 
    e.preventDefault();
    e.stopPropagation();
    e2 = jQuery.Event("click");        
    //e2.which = 50;        //   for other key combos like CTRL+A+click 
    e2.ctrlKey = true;
    $( "#home").triggerHandler(e2);
    $( "#home").prop("checked", !$( "#home").prop("checked"));//toggle checkbox state
   }
});

演示：https：//jsfiddle.net/35g41aal/

Answer 2

这有点hacky，但有效：http：//jsbin.com/dogelehena/edit?html，console，output

<input type="checkbox" id="cb">
<label for="cb">Label</label>
<script>
$(function () {
  var cb = $('#cb');
  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  $('label').click(function (e) {
    if (e.ctrlKey && isFirefox) {
      var checked = cb.prop('checked');
      cb.prop('checked', !checked);
    }
  });
});
</script>

首先，将click事件附加到label，而不是input。这样，当CTRL固定下来时，事件不会被阻止，但是复选框状态不会改变。因此，在回调中，我们检查了e.ctrlKey，如果是真的，我们会手动更改该复选框的状态。

请注意，我添加了isFirefox检查，因为此功能可以修复Firefox中的行为，但它会在其他浏览器中破裂。