我应该为JavaScript链接使用哪个“href”值，“#”或“JavaScript:void（0）”？

以下是构建链接的两种方法，该链接的唯一目的是运行JavaScript代码。在功能、页面加载速度、验证目的等方面，哪个更好。？

函数myJsFunc（）{警报（“myJsFunc”）；}<a href=“#”onclick=“myJsFunc（）；”>运行JavaScript代码</a>

函数myJsFunc（）{警报（“myJsFunc”）；}运行javascript代码</a>

当前回答

不要将链接仅用于运行JavaScript。

使用href=“#”将页面滚动到顶部；使用void（0）会在浏览器中产生导航问题。

而是使用链接以外的元素：

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

并使用CSS设置样式：

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

其他回答

我选择使用javascript:void（0），因为使用它可能会阻止右键单击打开内容菜单。但是javascript：；更短，做同样的事情。

根据您想要完成的任务，您可以忘记onclick，只需使用href：

<a href="javascript:myJsFunc()">Link Text</a>

它避免了返回false的需要。我不喜欢#选项，因为如上所述，它会将用户带到页面顶部。如果你有其他地方可以发送用户，如果他们没有启用JavaScript（这在我工作的地方很少见，但这是一个非常好的主意），那么Steve提出的方法非常有效。

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

最后，如果您不想任何人去任何地方，也不想调用javascript函数，那么可以使用javascript:void（0）。如果您有一个想要发生鼠标悬停事件的图像，但没有任何内容可供用户单击，那么它会非常有用。

•Javascript：无效（0）；为空值[Notassigned]，这意味着浏览器将返回null，单击DOM，窗口将返回false。•javascript中的“#”不在DOM或Window之后。这意味着锚href内的“#”符号是LINK。链接到相同的当前方向。

“#”将使用户返回页面顶部，因此我通常使用void（0）。

javascript：；其行为类似于javascript:void（0）；

我个人将它们结合使用。例如：

HTML

<a href="#">Link</a>

使用一点jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

但我使用它只是为了防止用户单击空锚点时页面跳到顶部。我很少在HTML中直接使用onClick和其他on事件。

我的建议是将＜span＞元素与class属性一起使用，而不是锚。例如：

<span class="link">Link</span>

然后将函数分配给.link，其中包含一个封装在body中的脚本，该脚本位于</body>标记之前或外部JavaScript文档中。

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

*注意：对于动态创建的元素，请使用：

$('.link').on('click', function() {
    // do something
});

对于使用动态创建元素创建的动态创建元素，请使用：

$(document).on('click','.link', function() {
    // do something
});

然后，您可以将span元素设置为看起来像带有一点CSS的锚点：

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

下面是上面提到的jsFiddle示例。

推荐文章