javascript - In firefox, when a select has position and a z-index, why do change events not fire on tab?

Question

寻找关于为什么更改事件会在没有位置或 z-index 时触发的任何信息，以及如果这些样式确实存在它为什么不会触发的信息。此问题仅在 Firefox 中出现。

更改事件不会在选项卡上触发

<select style="position: relative; z-index:1"><option>1</option><option>2</option></select>

更改事件不会在选项卡上触发

<select><option>1</option><option>2</option>

更改事件示例代码(使用jQuery

$('select').on('change', function(e){ console.log(e.type) });

请参阅this CodePen一个工作示例。

Answer 1

看起来这个问题可以通过在 select 接收焦点之前设置位置来解决，如下所示:

select { position: relative; }
select:focus { z-index: 1; }

如果有人知道为什么在 :focus 上更改 select 的位置时会发生这种情况，我仍然会感到好奇