在 JavaScript 中创建动态超链接的正确方法是什么？答案

【问题标题】：What is the proper method for creating dynamic hyperlinks in JavaScript?在 JavaScript 中创建动态超链接的正确方法是什么？
【发布时间】：2012-09-01 06:38:44
【问题描述】：

我知道创建<a href="javascript:my_func();">link text</a> 之类的链接是不受欢迎的，因为这会诱使用户认为这是一个真正的链接。

我有很多链接实际上只是在浏览器中运行 JS 代码而不是强制页面导航，因此我不想使用上面的链接，我正在寻找一种适用于所有浏览器的替代方法并且防止中间点击打开一个新的标签/窗口。

以下方法是否令人满意？

HTML

<a href="javascript:void(0);" id="id_here">link text</a>

JavaScript

$("#id_here").bind('click',(function(params){
    return function(){
        // do stuff here with `params`
    };
})(params));

【问题讨论】：

哦，还请注意，这是针对论坛主机的 JavaScript 修改 - 所以非 JS 用户的处理程序根本没有用！

标签： javascript jquery html hyperlink

【解决方案1】：

javascript: 什么都不好。上面的两个 javascript: 用法没有太大区别。将"#" 用于href 也差不多；它在 JS 关闭的情况下添加到历史记录中，并且链接没有用。您应该做的（理想情况下）是让链接实际工作，例如

<a href="/an/actual/path"> ...

然后，使用 JS，防止默认链接行为

$("#id_here").on('click', function (e) { e.preventDefault(); });

如果没有实际的路径可以访问，那么在关闭 JS 的情况下，链接甚至不应该暴露；您可以稍后将其附加到 DOM 或仅使用 CSS 隐藏它（并使用 JS 显示它）。

【讨论】：

我应该说，这是一个只有JS的产品，所以没有必要迎合那些没有JS的人。
在这种情况下，您甚至不需要href 或e.preventDefault()，（您可以使用任何元素，但<a> 可能在语义上最有意义）。
@KeirSimmons：那就迎合那些使用中键的人吧！如果我愿意，为什么我不能在新标签页中打开您的链接？
e.preventDefault(); 抑制超链接的自然动作，因此 href="#" 不会添加到历史对象中。一些浏览器需要一个非空的 href 才能正确地将锚呈现为可点击 - “#”是最好的选择。就个人而言，我不适合关闭 js 的浏览器。
@KeirSimmons 如果 JS 关闭，那么最好什么都不显示，至少可以防止意外。或者可能是“打开 JS”消息之类的。

【解决方案2】：

我建议您使用<a> 以外的其他节点，例如<div>：

<div id="jsLink" style="cursor:pointer">Click Me</div>

和 jQuery：

$("#jsLink").click(function(params){
  // do something
}

【讨论】：

-1 - 不是一个好主意 - 例如，不能使用制表符
别忘了给你的 div 设置样式，让它看起来像一个链接。哦。它也是一个 div - 块元素

【解决方案3】：

<a href="#" id="id_here">link text</a>

# 在这里使链接看起来像链接 JavaScript：

$("#id_here").bind('click',function(e){
    e.preventDefault();
})

e.preventDefault() 不允许浏览器执行默认操作（例如导航到另一个页面）

【讨论】：

我可能会向用户显示一个更有意义的网址，例如#!/edit-post
不管href里面会有什么，除了不能为空。否则会像跨度一样显示

【解决方案4】：

我玩了一些，你可以通过hashchange得到一些good results：

var commands = {
    foo: function() { alert("Foo!"); },
    bar: function() { alert("Foo bar!"); },
    baz: function() { alert("Foo bar baz!"); }
};

$(window).bind('hashchange', function() {
    var hash = window.location.hash.replace(/^#/,'');
    if(commands[hash]) {
        commands[hash]();
        return false;
    }
}).trigger('hashchange');

用简单的HTML：

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>
<a href="#baz">Baz</a>

即使您右键单击 -> 在新选项卡中打开或单击鼠标中键，这也有效！

请注意，并非所有浏览器都支持hashchange。

【讨论】：