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

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

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

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

请参阅http://icant.co.uk/articles/pragmatic-progressive-enhancement/ 对事件取消和良好的事件设计有很好的解释。 请参阅 http://docs.jquery.com/Tutorials:How_jQuery_Works 了解一些 jQuery 特定指南。

Answer 2

改为

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

and

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

函数中，调用

evt.preventDefault();

Answer 3

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

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

或者，您可以设置以 # 开头的 href，或者根本不使用 元素（使用 相反）——当然，如果它不是真正的链接。

Answer 4

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

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

Answer 5

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

作为额外的预防措施，我强烈建议您不要使用href="#" 在仅触发脚本的链接上，应使用 void 运算符：

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

这样做的原因是：当事件未取消时，浏览器将尝试加载 < 提供的 URL。 code>href 属性。javascript:“协议”告诉浏览器改为使用随附代码的值除非该值未定义< /strong>. void 运算符明确存在以返回未定义，因此浏览器保留在现有页面上 - 无需重新加载/刷新 - 允许您继续调试脚本

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