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

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

or

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


当前回答

#比javascript:任何东西都好,但以下内容甚至更好:

HTML格式:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

您应该始终努力实现优雅的降级(在用户没有启用JavaScript的情况下……以及在有规范和预算的情况下)。此外,在HTML中直接使用JavaScript属性和协议被认为是不好的形式。

其他回答

这里还有一件更重要的事情要记住。第508节合规性。因此,我觉得有必要指出,您需要为JAWS等屏幕阅读器提供锚标记,以便能够通过选项卡将其聚焦。因此,解决方案“只使用JavaScript,忘记开头的锚”并不是其中的一个选项。只有当您无法让屏幕跳回到顶部时,才需要在href中启动JavaScript。您可以使用0秒的设置超时,让JavaScript在需要关注的地方启动,但即使是页面也会跳到顶部然后返回。

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

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

这不会有任何作用。

此外

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

只是为了抓住其他人提到的要点。

绑定事件'onload'或$('document').ready{}要好得多;然后将JavaScript直接放入单击事件中。

在JavaScript不可用的情况下,我会使用一个href到当前URL,也许还会使用一个锚到链接的位置。该页面仍然可供没有JavaScript的人使用,因为他们不会注意到任何差异。

正如我所掌握的,这里有一些jQuery可能会有所帮助:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);

您也可以在锚点中编写如下提示:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

因此用户将知道该链接的作用。

我建议改用<button>元素,特别是当控件应该在数据中产生更改时。(类似于POST。)

如果不引人注目地注入元素,这是一种渐进式增强,效果会更好。(请参阅此评论。)