以下是构建链接的两种方法,该链接的唯一目的是运行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(),以确保单击按钮时它不会跟随链接。此选项称为优雅降级。

其他回答

2019年1月编辑

在HTML5中,使用没有href属性的a元素是有效的。它被认为是“占位符超链接”

如果a元素没有href属性,则该元素表示一个占位符,如果链接是相关的,则该占位符可能是放置链接的位置,仅包含元素的内容。

例子:

<a>previous</a>

如果在此之后,您希望执行其他操作:

1-如果你的链接不到任何地方,不要使用<a>元素。使用<span>或其他合适的工具,并添加CSS:hover以根据您的需要设置其样式。

2-使用javascript:void(0)OR javascript:undefined OR javascript:;如果你想要原始、精确和快速。

第一个,最好是在用户禁用JavaScript的情况下使用一个真正的链接。只需确保返回false,以防止在JavaScript执行时触发单击事件。

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

如果您使用Angular2,则此方法有效:

<a[routerLink]=“”(单击)=“passTheSalt()”>单击我</a>。

请参见此处https://stackoverflow.com/a/45465728/2803344

4.0之前的引导模式有一个基本上未记录的行为,即它们将使用AJAX从元素加载href,除非它们正好是#。如果您使用的是Bootstrap 3,javascript:void(0);hrefs将导致javascript错误:

AJAX错误:错误GET javascript:void(0);

在这些情况下,您需要升级到引导程序4或更改href。

理想情况下,您应该这样做:

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

或者,更好的是,您可以在HTML中使用默认的操作链接,并且在DOM渲染后通过JavaScript将onclick事件不显眼地添加到元素中,从而确保如果JavaScript不存在/未被利用,您不会有无用的事件处理程序来处理代码,并可能混淆(或至少分散您的注意力)实际内容。

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

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