在 Firefox 中,当选择具有位置和 z 索引时,为什么更改事件不会在选项卡上触发

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

本文关键字:事件 选项 为什么 索引 选择 Firefox 位置      更新时间:2023-09-26

查找有关为什么更改事件会在没有位置或 z 索引时触发的任何信息,以及如果这些样式确实存在,为什么它不会触发。此问题仅在火狐中发生。

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

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

请参阅此代码笔以获取工作示例。

似乎可以通过在select获得焦点之前设置位置来解决此问题,如下所示:

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

我仍然很好奇是否有人深入了解为什么在更改select的位置时会发生这种情况:focus