使选择元素真正无法聚焦

Question

我一直在尝试使选择元素无法聚焦。多个消息来源建议将tabIndex 设置为-1。这是我尝试过的，但失败了。

考虑以下示例：

function addEv(id, event, message)
{
  document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML = message;
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

addEv('span', 'focus', 'span focus');
addEv('span', 'blur', 'span blur');

addEv('select-wrapper', 'focus', 'div focus');
addEv('select-wrapper', 'blur', 'div blur');

#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}

<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

如果您浏览元素，一切都会按预期工作。两个输入元素和 div 元素获得焦点。单击显示“of”的跨度也是如此。但是，如果您单击选择元素，它将获得焦点而不是 div。这意味着错误的焦点事件会被触发，并且选择元素的视觉效果会随着它被聚焦而改变。这在 Firefox 和 Chrome 中是一致的，所以我认为这是故意的。

问题是：如何使选择元素无法聚焦，而使围绕它的 div 成为焦点？当然，我仍然希望能够打开下拉菜单并选择一个选项。

Answer 1

编辑：此方法在 Firefox 52 或更早版本中停止工作

我自己找到了一个肮脏的解决方案。如果我忽略了 select 元素仍然会触发焦点和模糊事件的事实，我可以通过在 select 元素获得焦点时执行 select.blur() 和 div.focus() 使其看起来像 div 元素成为焦点。请参阅下面的代码。

注意：如果您要使用我的解决方案，请不要忘记手动实现辅助功能，因为正如@nnnnnn 指出的那样，它们将不再起作用。

function addEv(id, event, message)
{
	document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML += message+"<br>";
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

addEv('span', 'focus', 'span focus');
addEv('span', 'blur', 'span blur');

addEv('select-wrapper', 'focus', 'div focus');
addEv('select-wrapper', 'blur', 'div blur');

document.getElementById('select').addEventListener('focus', function(){
	document.getElementById('select').blur();
  document.getElementById('select-wrapper').focus();
});

#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}

<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

Answer 2

除了 tabindex = -1 之外，您还可以将它添加到 CSS 属性中。

  pointer-events: none;

这对我有用