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(){...

到

$('.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，或者根本不使用<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属性提供的URL。 javascript:“协议”告诉浏览器改为使用随附代码的值除非该值是undefined。 The void operator exists explicitly to return undefined，因此浏览器停留在现有页面上——无需重新加载/刷新——允许您继续调试脚本。

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