tablesorter插件列头添加按钮后无法触发排序的技术问询

我之前也遇到过类似的可访问性需求，刚好能帮你搞定这个问题！下面是具体的解决步骤和注意事项：

1. 精准配置selectorSort选项 #

单纯把"button"加到selectorSort里可能不够，因为tablesorter需要明确识别表头内的按钮，避免误触发页面其他无关按钮。你应该把配置改成：

$('table').tablesorter({
  selectorSort: 'th button', // 限定选择<th>标签内的<button>元素
  // 保留你原有的其他配置项
});

2. 检查事件冒泡是否被阻断 #

如果你的按钮上有自定义点击事件，并且用了event.stopPropagation()或者不必要的event.preventDefault()，会阻断tablesorter的排序触发逻辑。确保按钮的事件处理代码没有阻止事件向上冒泡到<th>元素。

3. 手动绑定排序触发（备选方案） #

如果上面的配置还是不生效，可以手动给按钮绑定点击事件，主动触发表头的排序动作：

// 给所有表头内的按钮绑定点击事件
$('th button').on('click', function(e) {
  e.preventDefault(); // 阻止按钮默认行为（比如避免submit类型按钮触发表单提交）
  const $targetHeader = $(this).closest('th'); // 获取按钮所在的表头元素
  $targetHeader.trigger('sort'); // 触发tablesorter的排序事件
});

4. 优化按钮的HTML与样式 #

为了兼顾屏幕阅读器体验和视觉交互，建议这样写表头结构：

<th>
  <button type="button" aria-label="点击排序：列标题">列标题</button>
</th>

再加上CSS让按钮占满整个表头，这样点击表头任何区域都能触发按钮：

th button {
  width: 100%;
  height: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
}

这样调整后，按钮就能正常触发tablesorter的排序功能，同时完全满足可访问性的要求啦！

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