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

Question

我知道创建这样的链接是不受欢迎的，<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));

Answer 1

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

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

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

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

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

Answer 2

我做了一些游戏，你可以得到一些好的结果hashchange：

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并非所有浏览器都支持。

Answer 3

我建议您使用除 之外<a>的另一个节点，例如<div>：

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

和 jQuery：

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

Answer 4

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

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

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

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