1

新手问题...

目标：

  • 我打算将 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（语法）错误之外，还有什么可能导致浏览器重新加载页面？

4

5 回答 5

6

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

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

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

请参阅http://icant.co.uk/articles/pragmatic-progressive-enhancement/了解有关活动取消和良好活动设计的详细说明。请参阅http://docs.jquery.com/Tutorials:How_jQuery_Works以获得一些 jQuery 特定指导。

于 2009-07-06T19:03:38.060 回答
1

看来您只是按照链接目标 URL。那是因为您没有阻止默认的点击操作：

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

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

于 2009-07-06T19:06:21.597 回答
1

改变

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

到

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

并在函数中调用

evt.preventDefault();
于 2009-07-06T19:09:19.657 回答
0

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

try { (
   e || window.event).preventDefault(); 
} 
 catch( ex ) 
{ 
 /* do Nothing */ 
}
于 2009-07-06T20:50:34.053 回答
-1

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

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

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

这样做的原因是：当事件没有被取消时，浏览器会尝试加载该href属性提供的 URL。“javascript:协议”告诉浏览器改为使用随附代码的值，除非该值是undefined. 运算符显式存在于 return ，因此voidundefined浏览器停留在现有页面上 - 无需重新加载/刷新 - 允许您继续调试脚本。

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

于 2009-07-06T19:22:02.720 回答