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

【问题标题】：why is this javascript alert firing off twice?为什么这个 javascript 警报会触发两次？
【发布时间】：2012-08-13 18:31:17
【问题描述】：

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

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

【问题讨论】：

在你使用 ChangeStyle() 的地方添加代码
仅供参考，onclick 调用附带 this 引用调用元素。您无需使用 getElementById 再次查找元素。示例：jsfiddle.net/qHSvT
你在一个链接里放一个链接，你只是想替换它吗？

标签： javascript html onclick alert innerhtml

【解决方案1】：

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

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

【讨论】：

感谢您的快速响应，我将如何防止这种情况发生。

【解决方案2】：

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

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

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

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

否则，您将在链接内创建链接

【讨论】：

感谢您向我展示它应该如何编写。我现在看到了我的错误，以及您所说的另一个链接中的链接是什么意思。再次感谢您的帖子。