带有上下文本的按钮将不会单击

如何解决带有上下文本的按钮将不会单击

我有此按钮代码。

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

我注意到我可以单击该按钮，除非我不小心单击了上级和下级文本（+和-），否则它不会执行操作。我可以点击/来毫无问题地执行操作。

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

P.S。该按钮是我正在编码的javascript计算器的一部分。该按钮应该将数字转换为负数。

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

解决方法

似乎只能在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>

,

• 这对我有用（我正在使用Google Chrome）

  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
  });