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

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

or

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


当前回答

我认为你提出了一个错误的二分法。这不是唯一的两个选项。

我同意D4V360先生的观点,他建议,即使您使用的是锚标记,但这里并没有真正的锚。您所拥有的只是文档的一个特殊部分,其行为应该略有不同。<span>标记更合适。

其他回答

如果您使用的是<a>元素,请使用以下命令:

<a href="javascript:myJSFunc();" />myLink</a>

就我个人而言,我会在稍后使用JavaScript附加一个事件处理程序(使用attachEvent或addEventListener,或者也可以将您最喜欢的JavaScript框架放在这里)。

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

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

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

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

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

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

老实说,我两个都不建议。我会使用一个样式化的<button></button>来实现该行为。

按钮链接{显示:内联块;位置:相对;背景色:透明;光标:指针;边框:0;填充:0;颜色:#00f;文本装饰:下划线;字体:inherit;}<p>一个看起来像<button type=“button”class=“link”>链接</button>的按钮</p>

这样您就可以分配onclick。我还建议通过脚本绑定,而不是在元素标记上使用onclick属性。唯一的问题是旧IE中无法禁用的伪3d文本效果。


如果必须使用A元素,请使用javascript:void(0);由于已经提到的原因。

如果onclick事件失败,将始终进行拦截。不会发生错误的加载调用,或基于哈希更改触发其他事件如果单击失败(onclick throws),哈希标记可能会导致意外行为,除非这是一个适当的失败行为,并且您希望更改导航历史记录,否则请避免它。

注意:您可以将0替换为javascript:void('删除记录123')之类的字符串,它可以作为一个额外的指示符,显示单击的实际操作。

在五年前,链接</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(),以确保单击按钮时它不会跟随链接。此选项称为优雅降级。