javascript - 为什么这个 javascript 警报会触发两次？

Question

<script type="text/javascript">
function ChangeStyle()
{
    document.getElementById("p1").innerHTML = 
        "<a href='javascript:void()' onclick=\"window.location.href='http://google.com'\">The New Link</a>";
}
</script>
<a id="p1" href="javascript:void()" onclick="ChangeStyle();alert('hello');">The Link</a>

这是完整的代码。由于某种原因，警报会触发两次。我想不通。

Answer 1

通过设置innerHTML链接的 ，您将在第一个链接中创建另一个链接。

当您单击此内部链接时，单击事件会冒泡并触发外部单击处理程序。

Answer 2

您可能打算将链接包装到另一个元素中：

<span id="p1">
 <a href="javascript:void()" onclick="ChangeStyle();alert('hello');">The Link</a>
</span>

现在您可以按照您可能想要的方式替换p1使用的内容：innerHTML

<script type="text/javascript">
function ChangeStyle()
{
  document.getElementById("p1").innerHTML = "<a [...]>The New Link</a>";
}
</script>

否则，您将在链接中创建一个链接