将 onclick 动作添加到 mathml答案

【问题标题】：add onclick action to mathml将 onclick 动作添加到 mathml
【发布时间】：2018-04-07 16:12:24
【问题描述】：

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

<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>

也没有成功。

【问题讨论】：

标签： javascript html mathml

【解决方案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>

【讨论】：