带有 sup 和 sub 文本的按钮不会点击

Question

我有这个按钮代码。

<button id="plusminus" class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>

我注意到我可以很好地单击按钮，除非我不小心单击了 sup 和子文本（ +和- ），然后它不会执行该操作。 我可以点击/执行操作，没有问题。

为什么要这样做？ 我在网上到处找，找不到太多信息。 我该如何解决？

PS 该按钮是我正在编写的 javascript 计算器的一部分。 此按钮应该将数字转换为负数。

这是我的 Javascript 计算器的链接： https : //codepen.io/kikibres/pen/MWyyBxJ?editors=1010

Answer 1

似乎仅在 codepen 上不起作用（？）==您的代码很好！
得到它的工作！

CSS - 添加以下内容：

.plusminus {
  position: relative;
  z-index: 0;
}
.plusminussupsub {
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}

HTML - 修改以下内容：
<button id="plusminus" class="key topcolor plusminus" value="plusminus"><sup class="plusminussupsub">+</sup>/<sub class="plusminussupsub">−</sub></button>

可能的解释：
单击事件（仅在 codepen 中？）不会从<sup>和<sub>元素上升。
解决方案：
使用z-index将它们推到按钮后面/下方（它仅适用于非静态定位，因此position: relative; + top: 0;和left: 0;因此它会（不）偏移到预期的位置）。

---

对于试验：

• 适用于我的 Chrome(V85)/Win10

 <button id="plusminus" class="key topcolor" value="plusminus" onclick="console.log('clicked at '+(new Date().valueOf()))" ><sup>+</sup>/<sub>−</sub></button>

Answer 2

• 这对我有用（我正在使用谷歌浏览器）

   const button = document.getElementById("plusminus"); button.addEventListener("click", function(){ document.body.style.background = "red"; // just using this for testing // do your code to convert to a negative number here });