Highcharts使用export-data模块查看数据表格时触发报错求助

• 使用Highcharts结合export-data模块实现图表下方数据表格的显示/隐藏功能
• 已按顺序引入必需脚本：

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/boost.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  

• 图表加载正常，但点击「查看数据表格」时，表格显示后控制台报错：

  export-data.src.js:488 Uncaught TypeError: b.closest is not a function
      at export-data.src.js:488:33
      at NodeList.forEach (<anonymous>)
      at f.<anonymous> (export-data.src.js:487:17)
      at highcharts.src.js:1654:25
      at Array.forEach (<anonymous>)
      at x (highcharts.src.js:1651:17)
      at f.d.toggleDataTable (export-data.src.js:1208:21)
      at f.onclick (export-data.src.js:1252:25)
      at HTMLLIElement.onclick (exporting.src.js:2065:45)
  

• 报错后无法隐藏数据表格或通过JS函数更新表格

核心错误是export-data模块第488行代码中，变量b的类型与调用的closest方法不匹配：要么是将原生DOM节点当成jQuery对象调用jQuery的.closest()，要么是在不支持原生Element.closest()的环境中调用了该方法，本质是版本兼容性或DOM元素处理逻辑的bug。

方法1：升级Highcharts到最新稳定版 #

Highcharts官方大概率已修复该DOM处理bug，直接替换所有Highcharts相关脚本为最新稳定版链接即可（版本号可参考Highcharts官网）：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

方法2：手动修复模块代码 #

若无法升级版本，直接修改export-data.src.js第488行：

• 若b是原生DOM节点，将b.closest改为$(b).closest（用jQuery包装后调用对应方法）
• 若b是jQuery对象，确认环境支持原生方法或调整为jQuery的.closest()调用

方法3：添加原生closest方法的Polyfill #

针对IE11等不支持原生Element.closest()的浏览器，在引入Highcharts脚本前添加Polyfill：

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;
    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

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