我正在开发一个包含 MathJax 元素的网页，并且我已经使用某些元素的 onclick 事件实现了切换功能。切换对于常规 HTML 元素非常有效，但是当我尝试将相同的 onclick 事件应用于 MathJax 元素时，它似乎没有响应。
这是代码的简化版本（MRE）：
<!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>
问题是 onclick 事件对于常规元素按预期工作，但似乎不会针对 MathJax 元素触发。在这里，在类
button任何见解或解决方案将不胜感激。谢谢！
嗯，是的。与mathjax无关。您获取单击了哪个按钮的方法不正确。
首先，依赖这种 id 编号是一种非常糟糕的风格：您需要绝对保证会有尽可能多的
.button.toggle其次，更直接的是这里发生的情况，您提取 id 编号的方法仅适用于平面元素
<span class=button><b>Hello</b> world</span>
仅当您单击“world”（即您为其提供编号 ID 的按钮上）时才起作用，但如果您单击“hello”则不起作用。因为“目标”是
<b>您需要找到另一种方法来关联按钮和切换范围。
例如，如果它不能使用临时 ID（显然，您正在执行所有这些操作，因为您不想在 html 中添加自己
id=....button.toggle一个建议
window.MathJax = {
tex: {
inlineMath: [['|', '|']],
displayMath: []
},
options: {
skipHtmlTags: [
'script', 'noscript', 'style', 'textarea',
'code', 'annotation', 'annotation-xml'
],
includeHtmlTags: {
br: '\\n', wbr: '', '#comment': '', 'pre': ':'
}
}
};.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;
}<html>
<head>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<body>
<h2>Input Code</h2>
<span>Some element</span>
<span class=pairButtonToggle><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>
let pairs = document.getElementsByClassName("pairButtonToggle");
for (let i = 0; i < pairs.length; i++) {
let buttons=pairs[i].getElementsByClassName("button");
let toggles=pairs[i].getElementsByClassName("toggle");
for(let b of buttons){
b.addEventListener("click", ()=>showinfo(toggles));
}
}
function showinfo(toggles) {
for(let t of toggles){
t.style.display = t.style.display === "none" ? "inline-block" : "none";
}
}
</script>
</body>