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

新手问题

目标是：

我打算有一个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示例中，后面是指向页面顶部的链接

您没有指定第二个示例的href属性是什么样子的，但不管它是什么，都将遵循它

---

有关事件取消和良好事件设计的详细说明，请参阅。有关jQuery的一些具体指导，请参阅。

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

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

您没有指定第二个示例的href属性是什么样子的，但不管它是什么，都将遵循它

---

有关事件取消和良好事件设计的详细说明，请参阅。有关jQuery的一些具体指导，请参阅。

您似乎只需遵循链接目标URL。这是因为您不阻止默认的单击操作：

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

---

或者，您可以设置一个以开头的href，或者根本不使用element，而是使用-当然，如果它不是真正的链接。

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

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

或者，您可以设置一个以开头的href，或者根本不使用element，而是使用-当然，如果它不是真正的链接。

更改

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

到

在函数中，调用

evt.preventDefault();

改变

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

到

在函数中，调用

evt.preventDefault();

---

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

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

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

原因是：未取消事件时，浏览器将尝试加载href属性提供的URL。协议告诉浏览器使用附带代码的值，除非该值未定义，因此，浏览器停留在现有页面上，没有重新加载/刷新，允许您继续调试脚本

---

这还允许您跳过整个仅JS链接的事件取消混乱，尽管您仍然需要在链接附带的代码中取消事件，这些链接具有非JS客户端的回退URL。

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

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

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

原因是：未取消事件时，浏览器将尝试加载href属性提供的URL。协议告诉浏览器使用附带代码的值，除非该值未定义，因此，浏览器停留在现有页面上，没有重新加载/刷新，允许您继续调试脚本

---

这还允许您跳过仅JS链接的整个事件取消混乱，尽管您仍然需要在链接附带的代码中取消事件，这些链接具有非JS客户端的回退URL。

它基本上与事件取消相关。。。 试试这个：

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

---

它基本上与事件取消有关。。。 试试这个：

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

---

谢谢你的链接。看起来我必须先读一些书，然后再胡乱使用Javascript，而不知道自己在做什么；谢谢你的链接。看起来我必须先读一些书，然后再胡乱使用Javascript，而不知道自己在做什么；同意出于这个目的，使用感觉有点奇怪，但不清楚还可以使用什么…同意。出于这个目的，使用感觉有点奇怪，但不清楚还可以使用什么…我没有意识到这一点。谢谢你的详细解释。今天我第一次使用stackoverflow。真是难以置信，多么有用哟

---

你们是。愿意提供一杯啤酒；如果JS不可用，最好有一个真正有用的链接。@David-这完全取决于你网站的用途。虽然我会说这通常是正确的，但它肯定不适用于像GMail这样的web应用程序。有时候根本就没有非JS的等价物。我没有意识到这一点。谢谢你的详细解释。今天我第一次使用stackoverflow。你们真是帮了大忙。愿意提供一杯啤酒；如果JS不可用，最好有一个真正有用的链接。@David-这完全取决于你网站的用途。虽然我会说这通常是正确的，但它肯定不适用于像GMail这样的web应用程序。有时根本就没有非JS等价物。