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

函数myJsFunc(){警报(“myJsFunc”);}<a href=“#”onclick=“myJsFunc();”>运行JavaScript代码</a>

or

函数myJsFunc(){警报(“myJsFunc”);}运行javascript代码</a>


当前回答

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

HTML

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

使用一点jQuery

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

or

$('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示例。

其他回答

您不应该在HTML中使用inline onclick=“something();”,以避免用无意义的代码污染它;所有单击绑定都必须在Javascript文件(*.js)中设置。

像这样设置绑定:$(“#myAnchor”).click(function(){…**return false**;});或$('#myAnchor').bind('click',function(){…**return false**;});

然后,您就可以轻松加载一个干净的HTML文件(并且seo友好),而无需数千href=“javascript:void(0);”,只需href=“#”

最简单且最为大家所使用的是javascript:void(0)。您可以使用它来代替使用#来停止标记重定向到标题部分。

<a href="javascript:void(0)" onclick="testFunction();">Click To check Function</a>

function testFunction() {
    alert("hello world");
}

理想情况下,您应该有一个真正的URL作为非JavaScript用户的回退。

如果这没有意义,请使用#作为href属性。我不喜欢使用onclick属性,因为它将JavaScript直接嵌入到HTML中。更好的方法是使用外部JS文件,然后将事件处理程序添加到该链接。然后,您可以阻止默认事件,以便在用户单击该事件后,URL不会更改为追加#。

除非您使用JavaScript编写链接(这样您就知道它在浏览器中已启用),否则理想情况下,您应该为禁用JavaScript的浏览者提供适当的链接,然后在onclick事件处理程序中阻止该链接的默认操作。这样,启用JavaScript的用户将运行该功能,而禁用JavaScript的用户则将跳转到适当的页面(或同一页面中的位置),而不是只单击链接而不发生任何事情。

因此,当您使用<a/>标记执行某些JavaScript操作时,如果您也放入href=“#”,则可以在事件末尾添加return false(如果是内联事件绑定),如:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

或者您可以使用JavaScript更改href属性,如:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

or

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

但从语义上讲,上述所有实现这一点的方法都是错误的(尽管它很好)。如果没有创建任何元素来导航页面,并且有一些JavaScript内容与之相关,那么它不应该是<a>标记。

您可以根据需要简单地使用<button/>来做事情或任何其他元素,如b、span或任何适合的元素,因为您可以在所有元素上添加事件。


因此,使用<a href=“#”>有一个好处。在执行a href=“#”时,默认情况下会在该元素上获得光标指针。为此,我认为您可以使用CSS,比如cursor:pointer;这也解决了这个问题。

最后,如果您从JavaScript代码本身绑定事件,那么如果您使用的是<a>标记,则可以使用event.prpreventDefault()来实现这一点,但如果您没有使用<a>标签,则可以获得一个优势,您不需要这样做。

所以,如果你看到了,最好不要对这种东西使用标签。