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

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

or

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


当前回答

在现代网站上,如果元素只执行JavaScript功能(而不是真正的链接),则应避免使用href。

为什么?此元素的存在告诉浏览器这是一个与目的地的链接。这样,浏览器将显示“在新选项卡/窗口中打开”功能(使用shift+单击时也会触发)。这样做将导致在没有触发所需功能的情况下打开同一页面(导致用户沮丧)。

关于IE:从IE8开始,如果设置了doctype,元素样式(包括悬停)就会起作用。IE的其他版本真的不用担心了。

唯一的缺点:删除HREF将删除tabindex。为了克服这个问题,您可以使用样式为链接的按钮或使用JS添加tabindex属性。

其他回答

“#”将使用户返回页面顶部,因此我通常使用void(0)。

javascript:;其行为类似于javascript:void(0);

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

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

我会使用:

<a href="#" onclick="myJsFunc();return false;">Link</a>

原因:

这使得href变得简单,搜索引擎需要它。如果您使用其他任何东西(例如字符串),它可能会导致404未找到错误。当鼠标悬停在链接上时,它不会显示它是一个脚本。通过使用return false;,页面不会跳到顶部或断开后退按钮。

您可以使用href并删除所有只有哈希值的链接:

HTML格式:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

如果您恰好使用AngularJS,可以使用以下选项:

<a href="">Do some fancy JavaScript</a>

这不会有任何作用。

此外

它不会像(#)那样将您带到页面顶部因此,您不需要使用JavaScript显式返回false它简短而简洁