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页面正在重新加载，文本输入字段和所有动态填充的列表都变为空白。

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（语法）错误，什么可能导致浏览器重新加载页面？

来源

2009-07-06 Roman

变化

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

到

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

，并在功能，来电

evt.preventDefault();

来源

2009-07-06 19:09:19 geowa4

Hi George，是的，它的工作方式。非常感谢！ – Roman 2009-07-06 19:34:45

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

在简单的HTML示例中，会遵循页面顶部的链接。

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

查看http://icant.co.uk/articles/pragmatic-progressive-enhancement/可以很好地解释事件取消和良好的事件设计。有关jQuery特定指导，请参阅http://docs.jquery.com/Tutorials:How_jQuery_Works。

来源

2009-07-06 19:03:38 Quentin

感谢您的链接。看起来我必须先阅读Javascript才能阅读，而不知道自己在做什么;） – Roman 2009-07-06 19:36:06

看来你只是按照链接目标网址。那是因为你没有阻止默认点击动作：

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

或者，你可以建立一个HREF开始#，或不使用<a>元素都（使用<span style="cursor:pointer">代替） - 如果它不是一个真正的链接当然。

来源

2009-07-06 19:06:21

同意。使用为此目的感觉有点奇怪（但它并不明显，还有什么其他用途......） – Roman 2009-07-06 19:37:59

-1

虽然这里其他的答案做出关于取消活动优秀点，你还是会碰到问题，如果你的JavaScript包含错误，防止您的事件取消代码运行。（由于可能的情况下，如果你是，比如说，调试代码。

作为一个额外的预防措施，我强烈建议你不上的链接使用href="#"只触发脚本，而是使用void操作：

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

这样做的原因是：在不取消的情况下，浏览器将尝试加载由href属性提供的URL的javascript:“协议”告诉浏览器，而不是使用的价值。随附代码un这个值小于undefined。 The void operator exists explicitly to return undefined，所以浏览器停留在现有页面上 - 无需重新加载/刷新 - 允许您继续调试脚本。

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

来源

2009-07-06 19:22:02

我不知道这件事。感谢您的详细解释。今天我第一次使用了stackoverflow。令人难以置信的是你们是多么有帮助。愿意提供啤酒;） – Roman 2009-07-06 19:51:18

它基本上涉及事件取消... 试试这个：

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

来源

2009-07-06 20:50:34 kadalamittai

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

回答

相关问题