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

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

or

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


当前回答

在五年前,链接</a>或链接</a href=“javascript:void(0)”onclick=“myJsFunc();”>Link</a>或者其他任何包含onclick属性的操作都是可以的,但现在可能是一种糟糕的做法。原因如下:

它促进了引人注目的JavaScript的实践——事实证明,这很难维护,也很难扩展。更多信息请参见Unobrusive JavaScript。你正在花时间编写令人难以置信的过于冗长的代码——这对你的代码库几乎没有好处(如果有的话)。现在有更好、更容易、更可维护和可扩展的方法来实现期望的结果。

低调的JavaScript方式

只是根本没有href属性!任何好的CSS重置都会处理掉丢失的默认光标样式,所以这不是问题。然后使用优雅而不引人注目的最佳实践来附加JavaScript功能,因为JavaScript逻辑保留在JavaScript中,而不是标记中,因此更易于维护。当您开始开发需要将逻辑拆分为黑盒组件和模板的大型JavaScript应用程序时,这一点至关重要。在大型JavaScript应用程序架构中了解更多信息

简单代码示例

//取消单击事件$('.cancel action').click(function(){alert('取消操作发生!');});//Internet Explorer 6和Internet Explorer 7的悬停垫片。$(document.body).on('over','a',function(){$(this).tggleClass('over');});{光标:指针;颜色:蓝色;}a: 悬停,a.hover{文本装饰:下划线;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><a class=“cancel action”>取消此操作</a>

黑框Backbone.js示例

有关可扩展的、黑框的Backbone.js组件示例,请参阅此处的jsfiddle示例。请注意我们如何利用不引人注目的JavaScript实践,并且在少量代码中有一个组件可以在页面上重复多次,而不会在不同的组件实例之间产生副作用或冲突。太神了

笔记

省略a元素上的href属性将导致无法使用tab键导航访问该元素。如果希望通过tab键访问这些元素,可以设置tabindex属性,或者使用button元素。您可以很容易地将按钮元素设置为看起来像Tracker1的答案中提到的普通链接。省略a元素上的href属性将导致InternetExplorer6和InternetExplorer7不采用a:hover样式,这就是为什么我们添加了一个简单的JavaScript填充程序来通过a.hover实现这一点。这是完全可以的,如果你没有href属性,没有优雅的降级,那么你的链接无论如何都不会工作,你会有更大的问题需要担心。如果您希望在禁用JavaScript的情况下仍能执行操作,那么可以使用带有href属性的a元素,该元素指向某个URL,该URL将手动执行操作,而不是通过Ajax请求或其他方式执行操作。如果您正在执行此操作,则需要确保在单击调用中执行event.prpreventDefault(),以确保单击按钮时它不会跟随链接。此选项称为优雅降级。

其他回答

如果您使用链接来执行一些JavaScript代码(而不是使用D4V360这样的span),请执行以下操作:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

如果您使用带有onclick的链接进行导航,请不要在JavaScript关闭时使用href=“#”作为回退。当用户单击链接时,这通常非常令人讨厌。相反,如果可能,请提供onclick处理程序将提供的相同链接。如果无法做到这一点,请跳过onclick,只需在href中使用JavaScript URI。

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

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

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

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

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

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

肯定hash(#)更好,因为在JavaScript中它是一个伪方案:

污染历史实例化引擎的新副本在全局范围内运行,不尊重事件系统。

当然,使用onclick处理程序防止默认操作的“#”更好。此外,唯一目的是运行JavaScript的链接并不是真正的“链接”,除非当出现问题时,您将用户发送到页面上某个合理的锚点(只需#将发送到顶部)。您可以简单地使用样式表模拟链接的外观,而完全不用考虑href。

此外,关于牛神的建议,特别是:。。。href=“javascript_required.html”onclick=“…这是一种很好的方法,但它没有区分“禁用javascript”和“onclick失败”场景。