表格行数超5行时需双击选中行的问题排查请求

你遇到的这个问题确实挺棘手的，结合你的代码和现象来看，核心是表格行数超过5行触发滚动容器后，首次点击被浏览器的焦点管理或事件优先级干扰，导致行选中逻辑没有正常触发。下面是几个最可能的原因：

1. 可滚动容器的焦点抢占 #

当表格内容超过.scroll容器的max-height（150px）时，这个容器会变成可滚动元素。浏览器对于可滚动元素有个默认行为：如果焦点原本在下拉菜单这类控件上，首次点击可滚动区域的任意位置，浏览器会先把焦点转移到这个滚动容器上（为了支持键盘滚动操作）。这个过程会：

• 触发下拉菜单失焦（和你看到的现象完全匹配）
• 触发浏览器默认的:focus样式变化（比如容器出现outline，看起来像是表格样式改变）
• 直接消耗掉第一次点击的事件，导致绑定在tr上的点击回调没被触发；第二次点击时焦点已经在容器上，才会正常触发行选中逻辑。

2. 事件委托的触发优先级冲突 #

你的行点击事件是通过事件委托绑定在#secondTable上的：

$('#secondTable').on("click", '#tableBody tr', function(){...})

当滚动容器出现后，事件冒泡的路径多了一层.scroll容器。如果浏览器在处理首次点击时，先响应了滚动容器的mousedown或focus事件（这两个事件优先级高于click），就会打断click事件的传递，直到第二次点击才会正常触发tr的点击回调。

3. 动态DOM渲染后的事件捕获干扰 #

AJAX加载大量数据后，表格渲染完成的瞬间，浏览器可能在重绘滚动容器的滚动条，这时候首次点击的事件可能被重绘过程干扰，没有被正确捕获到委托事件。

针对这些可能的原因，你可以试试以下方法：

方法1：阻止滚动容器的焦点默认行为 #

给.scroll容器添加mousedown事件，阻止浏览器默认的焦点转移行为，避免消耗点击事件：

$('.scroll').on('mousedown', function(e) {
  // 阻止浏览器将焦点转移到滚动容器
  e.preventDefault();
});

方法2：AJAX加载后主动清除下拉菜单焦点 #

在createTableForConfiguration函数末尾，主动让下拉菜单失焦，避免首次点击时的焦点切换干扰：

function createTableForConfiguration(data){ 
  fillTable(data); 
  $('#configurationTable').show();
  // 替换成你实际的下拉菜单选择器
  $('#customerNameDropdown').blur();
}

方法3：调整事件委托的绑定层级 #

把事件委托绑定到更高层级的元素（比如.scroll容器），减少事件冒泡的干扰：

$(document).ready(function(){ 
  $('.scroll').on("click", '#tableBody tr', function(){
    var selected = $(this).hasClass("highlight");
    $("#tableBody tr").removeClass("highlight");
    if(!selected) $(this).addClass("highlight");
    $("[name='configuration']").val($(this).find('td:first').text());
  }); 
});

方法4：消除默认焦点样式干扰 #

浏览器默认会给获得焦点的元素添加outline，可能让你误以为表格样式变化，可通过CSS去掉：

.scroll:focus {
  outline: none;
}

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