如何将 shift+click 事件传递到底层输入元素？答案

【问题标题】：How can I passthrough a shift+click event to underlying input element?如何将 shift+click 事件传递到底层输入元素？
【发布时间】：2017-09-15 01:58:00
【问题描述】：

对于包裹在<label> 标签中的<input>（例如<label> <input type="checkbox"> Some Text </label>），<label> 标签上的点击事件也会被<input> 标签接收。

但是，如果在单击 <label> 时还按下了 shift 键，Firefox 不会将单击事件传递给 <input>（其他浏览器工作正常）。正如SO answer 中所回答的那样，这是 Firefox 特有的行为。

有没有办法在 Firefox 中关闭（或覆盖）此功能，以便在 <label> 上发生 shift+click 时 <input> 接收 shift+click 事件？

【问题讨论】：

使用 stopPropagation。它阻止事件在事件链中冒泡。这是对你有帮助还是我不明白这个问题？
@VikrantChaudhary 你查到答案了吗？
@Dekel 是的，我做到了。但我最终为我的用例实现了一些不同的方法。感谢您的回答！

标签： javascript jquery html firefox dom

【解决方案1】：

由于firefox 阻止此行为，您需要自己创建此行为。

这是一个简单的示例（请注意，由于shift 键，您可能需要添加/更改内容：

function show(event){
  el = event.srcElement||event.target;
  if (el.nodeName == "LABEL") {
    event.preventDefault();
    ev = new Event('click');
    document.getElementById(el.getAttribute('for')).dispatchEvent(ev);
  } else {
    el.checked = !el.checked;
    alert((el).id);
  }
}
document.getElementById('checkbox').addEventListener('click', show, false);
document.getElementById('label').addEventListener('click', show, false);

<input type="checkbox" id="checkbox"/>
<label for="checkbox" id="label">Click me!</label>

【讨论】：

我最终为我的用例实现了一点不同。但是感谢您的回答！