HTML中MathJax元素无法响应onclick事件的问题求助

问题描述 #

在包含MathJax元素的网页中，为带.button类的元素绑定了点击切换.toggle元素显示状态的功能，点击元素中的普通文本（如"vector"）可正常触发，但点击其中的MathJax渲染内容时无响应。

原始代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
  .toggle {
    display: none;
    position:absolute;
    width:5cm;
    border:1px solid yellow;
    background-color:rgba(255, 255, 0, 0.75);
    opacity:0.9;
    text-align:center;
  }
  .button {
    cursor: pointer;
  }
</style>
</style>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
window.MathJax = {
  tex: {
    inlineMath: [['|', '|']],
    displayMath: []
  },
  options: {
    skipHtmlTags: [
      'script', 'noscript', 'style', 'textarea', 
      'code', 'annotation', 'annotation-xml'
    ],
    includeHtmlTags: {
      br: '\\n', wbr: '', '#comment': '', 'pre': ':'
    }
  }
};
MathJax.Hub.Config({
  menuSettings: {
    context: "Browser"
  }
});
</script>

</head>

<body>
    <h2>Input Code</h2>
    <span>Some element</span>
    <span><span class="button" style="cursor:pointer;border:1px solid red">|\color{red}\fbox{$\tau$}| vector</span>
    <span class="toggle" style="display:none;width=3cm;white-space:normal;">This is some paragraph describing the toogle variable</span>
    </span>
    <br>
    <script>
      toggleids = document.getElementsByClassName("toggle");
      for (let i = 0; i < toggleids.length; i++) {
        toggleids[i].id = "toggle " + (i + 1);
      }
    
      buttonids = document.getElementsByClassName("button");
      for (let i = 0; i < buttonids.length; i++) {
        buttonids[i].id = "button " + (i + 1);
        buttonids[i].addEventListener("click", showinfo);
      }
    
      function showinfo(event) {
        let buttonIndex = event.target.id.split(" ")[1];
        let toggleId = "toggle " + buttonIndex;   
        let toggleElement = document.getElementById(toggleId);
        toggleElement.style.display =
        toggleElement.style.display === "none" ? "inline-block" : "none";
      }
    </script>
    
  </body>

</html>

原因分析 #

1. DOM结构替换：MathJax会将原始TeX表达式替换为自身生成的嵌套DOM结构（如<span class="mjx-chtml">等元素），点击这些生成的元素时，event.target指向的是MathJax的子元素，而非绑定事件的.button元素，导致通过event.target.id无法获取正确的按钮索引。
2. API版本不兼容：代码中使用了MathJax 2的MathJax.Hub.Config API，而当前引入的是MathJax 3，该API已被废弃，可能引发潜在的渲染冲突。

解决方案 #

核心修改点 #

• 改用event.currentTarget获取绑定事件的原始.button元素，无论点击的是子元素还是自身，都能正确获取按钮索引。
• 等待MathJax渲染完成后再绑定事件，避免异步渲染导致的DOM结构不一致。
• 修正MathJax 3的配置方式，移除过时API。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
  .toggle {
    display: none;
    position:absolute;
    width:5cm;
    border:1px solid yellow;
    background-color:rgba(255, 255, 0, 0.75);
    opacity:0.9;
    text-align:center;
  }
  .button {
    cursor: pointer;
  }
</style>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
window.MathJax = {
  tex: {
    inlineMath: [['|', '|']],
    displayMath: []
  },
  options: {
    skipHtmlTags: [
      'script', 'noscript', 'style', 'textarea', 
      'code', 'annotation', 'annotation-xml'
    ],
    includeHtmlTags: {
      br: '\\n', wbr: '', '#comment': '', 'pre': ':'
    }
  },
  menu: {
    context: "Browser" // MathJax 3的菜单配置方式
  }
};
</script>

</head>

<body>
    <h2>Input Code</h2>
    <span>Some element</span>
    <span><span class="button" style="cursor:pointer;border:1px solid red">|\color{red}\fbox{$\tau$}| vector</span>
    <span class="toggle" style="display:none;width=3cm;white-space:normal;">This is some paragraph describing the toggle variable</span>
    </span>
    <br>
    <script>
      // 为toggle元素设置id
      const toggleElements = document.getElementsByClassName("toggle");
      for (let i = 0; i < toggleElements.length; i++) {
        toggleElements[i].id = "toggle " + (i + 1);
      }
    
      // 等待MathJax渲染完成后绑定事件
      MathJax.startup.promise.then(() => {
        const buttonElements = document.getElementsByClassName("button");
        for (let i = 0; i < buttonElements.length; i++) {
          buttonElements[i].id = "button " + (i + 1);
          buttonElements[i].addEventListener("click", showinfo);
        }
      });
    
      function showinfo(event) {
        // 使用currentTarget获取绑定事件的.button元素，而非点击的子元素
        const buttonElement = event.currentTarget;
        const buttonIndex = buttonElement.id.split(" ")[1];
        const toggleId = "toggle " + buttonIndex;   
        const toggleElement = document.getElementById(toggleId);
        toggleElement.style.display = toggleElement.style.display === "none" ? "inline-block" : "none";
      }
    </script>
    
  </body>

</html>

额外说明 #

• MathJax.startup.promise.then()确保事件绑定在MathJax完成所有渲染后执行，避免DOM结构未生成时的无效操作。
• 如果需要支持更复杂的DOM结构，也可以使用event.target.closest('.button')方法向上查找最近的.button元素，效果与currentTarget一致。

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