Javascript 函数导致 HTML 页面重新加载 : why?

Question

新手问题...

目标:

• 我打算将 HTML 文本输入字段作为一种命令行输入。

• 一个无序的 HTML 列表显示了 5 个最近的命令。单击此列表中的最后一个命令应使用相应的命令填充命令行输入文本字段(以便重新执行或修改它)。

• 一个无序的 HTML 列表包含一个结果集。单击此列表中的 ID 应将相应的 ID 带入命令行输入文本字段。

在 HTML (DHTML) 中: 按预期工作:单击链接时，命令行输入文本字段会填充最近的命令。

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

在 Javascript 文件中: 无法按预期工作:单击链接时，命令行输入文本字段会填充相应的值(应该如此)，但似乎正在重新加载完整的 HTML 页面，文本输入字段和所有动态填充的列表变为空。

    function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}

现在问题: 除了潜在的 Javascript(语法)错误之外，还有什么可能导致浏览器重新加载页面？

Answer 1

在这两种情况下，您都不会取消点击链接的默认功能。

在纯 HTML 示例中，后面是指向页面顶部的链接。

您没有指定第二个示例的 href 属性是什么样的，但无论它是什么，它都会被遵循。

参见 http://icant.co.uk/articles/pragmatic-progressive-enhancement/为事件取消和良好的事件设计一个很好的解释。参见 http://docs.jquery.com/Tutorials:How_jQuery_Works获取一些 jQuery 特定指导。