将 onclick 动作添加到 mathml

Question

我正在尝试添加一些要在单击下一页中的箭头时执行的操作：

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">


 <script type="text/javascript">

  function createActions() {
   var div = document.getElementById("l");
   div.onclick=function(){alert("HI")};
  }

  
  window.onload = createActions;
 </script>
</head>
<body>

 <math>
  <mn>12</mn>
  <mo>&#x00D7;<!-- × --></mo>
  <mi>a</mi>
  <munderover>
   <mo>=</mo>
   <mo id="l" style="color: red;">&rarr;</mo>
   <mo style="color: red;">&larr;</mo>
  </munderover>
  <mi>24</mi>
 </math>
   
</body>
</html>

调试器显示元素 "l" 由对 "getElementById" 的调用返回，但 "onclick" 属性的定义不执行任何操作。

除了之前的测试，我还测试了没有 javascript 和 mathml:

<mo onclick='alert("HI")'>&rarr;</mo>

同样没有成功。

Answer 1

使用addEventListener() Method

count = 1;
document.getElementById("l").addEventListener("click", function(){
    alert("You clicked "+ count++ +" times");
});

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

 <math>
  <mn>12</mn>
  <mo>&#x00D7;<!-- × --></mo>
  <mi>a</mi>
  <munderover>
   <mo>=</mo>
   <mo id="l" style="color: red;">&rarr;</mo>
   <mo style="color: red;">&larr;</mo>
  </munderover>
  <mi>24</mi>
 </math>
   
</body>
</html>

将 onclick 动作添加到 mathml

add onclick action to mathml

javascript

html

mathml