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:用法之间没有太大区别。对"#"使用href差不多;它将JS关闭添加到历史记录中，并且该链接无用。你应该做的（理想情况下）是让链接真正起作用，例如

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

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

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

如果没有实际的路径，那么甚至不应该用JS关闭该链接;你可以稍后将它附加到DOM或者只是用CSS隐藏它（并用JS显示它）。

Answer 2

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

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

和jQuery：

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

Answer 3

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

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

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

e.preventDefault（）不允许浏览器执行默认操作（例如导航到其他页面）

Answer 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>

如果你点击右键，这甚至可以工作 - ＆gt;在新标签页或中键单击中打开！

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

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

4 个答案: