Javascript 函数导致 HTML 页面重新加载：为什么？

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

改变

$('.spa_id_href').click(function(){...

到

$('.spa_id_href').click(function(evt){...//notice the evt param

并在函数中调用

evt.preventDefault();

Answer 2

在这两种情况下，您都无需执行任何操作来取消单击链接的默认功能。

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

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

看 http://icant.co.uk/articles/pragmatic-progressive-enhancement/ 有关事件取消和良好事件设计的良好解释。看 http://docs.jquery.com/Tutorials:How_jQuery_Works 一些 jQuery 的具体指导。

Answer 3

看起来您只是按照链接目标 URL 进行操作。这是因为您没有阻止默认的单击操作：

e.preventDefault(); // `e` is the object passed to the event handler
// or
return false

或者，您可以设置以以下开头的 href #, ，或者不使用 <a> 根本没有元素（使用 <span style="cursor:pointer"> 相反）——当然，如果它不是真正的链接。

Answer 4

这基本上与事件取消有关......尝试这个：

try { (
   e || window.event).preventDefault(); 
} 
 catch( ex ) 
{ 
 /* do Nothing */ 
}

Answer 5

虽然这里的其他答案对取消事件提出了很好的观点，但如果您的 JavaScript 包含阻止事件取消代码运行的错误，您仍然会遇到问题。（如果你是，比如说，情况可能就是这样， 调试你的代码.

作为额外的预防措施，我强烈建议您 不是 使用 href="#" 在仅触发脚本的链接上。相反，使用 void 操作员：

<a href="javascript:void(0)" onclick="...">...</a>

原因是：当事件没有取消时，浏览器将尝试加载由 href 属性。这 javascript: “protocol”告诉浏览器改为使用随附代码的值 除非该值是 undefined. 这 void 运算符显式存在以返回 undefined, ，因此浏览器保留在现有页面上 - 无需重新加载/刷新 - 允许您继续调试脚本。

这还允许您跳过纯 JS 链接的整个事件取消混乱（尽管您仍然需要在附加到具有非 JS 客户端“后备”URL 的链接的代码中取消事件）。