求助：Firefox中表格粘性表头滚动后事件不触发（仅21行及以上）

问题描述 #

实现了带粘性表头的HTML表格，表头单元格绑定了mouseenter事件，但在Firefox浏览器中，当表格包含**21行及以上（含表头）**时，向下滚动后该事件会停止触发，Chrome和Safari中功能正常。

问题原因 #

这是Firefox对position: sticky元素的事件处理特性导致：当表格内容足够长，滚动后粘性表头虽视觉上固定在顶部，但Firefox的渲染层优化可能导致事件触发区域被表格后续行的元素（即使被视觉遮挡）覆盖，从而无法正确捕获mouseenter事件。

解决方案 #

给粘性表头添加z-index属性，提升其渲染层级，确保始终处于表格其他行的顶层，事件就能正常触发：

修改后的CSS #

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.sticky-row {
  top: 0;
  position: sticky;
  background-color: white;
  z-index: 1; /* 添加层级控制 */
}

同时可以优化事件绑定代码，直接定位到表头单元格，写法更直观：

const stickyHeaders = document.querySelectorAll('.sticky-row th');
stickyHeaders.forEach(header => {
  header.addEventListener('mouseenter', () => console.log('mouse enter cell'));
});

完整可测试代码 #

<div style="max-height: 300px; overflow: scroll">
  <table style="float:left">
    <tr class="sticky-row"><th>20行表格的粘性表头</th></tr>
    <tr><td>第2行</td></tr>
    <tr><td>第3行</td></tr>
    <tr><td>第4行</td></tr>
    <tr><td>第5行</td></tr>
    <tr><td>第6行</td></tr>
    <tr><td>第7行</td></tr>
    <tr><td>第8行</td></tr>
    <tr><td>第9行</td></tr>
    <tr><td>第10行</td></tr>
    <tr><td>第11行</td></tr>
    <tr><td>第12行</td></tr>
    <tr><td>第13行</td></tr>
    <tr><td>第14行</td></tr>
    <tr><td>第15行</td></tr>
    <tr><td>第16行</td></tr>
    <tr><td>第17行</td></tr>
    <tr><td>第18行</td></tr>
    <tr><td>第19行</td></tr>
    <tr><td>第20行</td></tr>
  </table>

  <table>
    <tr class="sticky-row"><th>21行表格的粘性表头</th></tr>
    <tr><td>第2行</td></tr>
    <tr><td>第3行</td></tr>
    <tr><td>第4行</td></tr>
    <tr><td>第5行</td></tr>
    <tr><td>第6行</td></tr>
    <tr><td>第7行</td></tr>
    <tr><td>第8行</td></tr>
    <tr><td>第9行</td></tr>
    <tr><td>第10行</td></tr>
    <tr><td>第11行</td></tr>
    <tr><td>第12行</td></tr>
    <tr><td>第13行</td></tr>
    <tr><td>第14行</td></tr>
    <tr><td>第15行</td></tr>
    <tr><td>第16行</td></tr>
    <tr><td>第17行</td></tr>
    <tr><td>第18行</td></tr>
    <tr><td>第19行</td></tr>
    <tr><td>第20行</td></tr>
    <tr><td>第21行</td></tr>
  </table>
</div>

<style>
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.sticky-row {
  top: 0;
  position: sticky;
  background-color: white;
  z-index: 1;
}
</style>

<script>
const stickyHeaders = document.querySelectorAll('.sticky-row th');
stickyHeaders.forEach(header => {
  header.addEventListener('mouseenter', () => console.log('mouse enter cell'));
});
</script>

内容的提问来源于stack exchange，提问作者Ovidijus Parsiunas