Question

在20世纪90年代，有一种将Javascript代码直接放入<a> href属性的方式，如下所示：

<a href="javascript:alert('Hello world!')">Press me!</a>

然后我突然停下来看。他们都被以下的东西所取代：

<a href="#" onclick="alert('Hello world!')">Press me!</a>

对于唯一目的是触发Javascript代码但没有真正href目标的链接，为什么鼓励使用onclick属性而不是href属性？< / p>

Answer 1

执行上下文不同，要看到这一点，请尝试这些链接：

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript:在全局上下文中执行，而不是作为元素的方法执行，这通常是您想要的。在大多数情况下，您正在使用或与您所执行的元素相关的事情，更好地在该上下文中执行它。

此外，它更干净，但我根本不会使用内联脚本。查看任何框架，以更清洁的方式处理这些事情。 jQuery中的示例：

$('a').click(function() { alert(this.tagName); });

Answer 2

实际上，这两种方法都被认为是过时的。相反，鼓励开发人员将外部JS文件中的所有JavaScript分开，以便将逻辑和代码与正版标记分开

这样做的原因是它创建了更易于维护和调试的代码，并且还促进了Web标准和可访问性。想象一下：看看你的例子，如果你在页面上有数百个这样的链接，并且需要使用外部JS引用来更改某些其他函数的alert行为，你只需要在一个JS文件中更改单个事件绑定，而不是一遍又一遍地复制和粘贴一堆代码，或者进行查找和替换。

Answer 3

有几个原因：

糟糕的代码练习：
HREF标记用于指示存在指向另一个位置的超链接。通过对javascript函数使用相同的标记，实际上并没有将用户带到任何地方是糟糕的编程习惯。
SEO问题：
我认为网络抓取工具使用HREF标记在整个网站上进行抓取。链接所有连接的部分。通过输入javascript，我们打破了这个功能。
打破辅助功能：
我认为一些屏幕阅读器将无法执行javascript＆amp;可能不知道如何处理javascript，而他们期望一个超链接。用户希望在链接悬停时在浏览器状态栏中看到一个链接，同时他们会看到如下字符串：“javascript：”，这可能会使他们感到困惑等。
你还在1990年代：
主流建议是将你的javascript放在一个单独的文件中。不像1990年代那样与页面的HTML混合在一起。

HTH。

Answer 4

我在新标签中打开了很多链接 - 只看到javascript：void（）。所以你和我一样惹恼了我（因为谷歌会看到同样的事情）。

另一个原因（其他人也提到过）是应该将不同的语言分成不同的文档。为什么？那么，

不支持混合语言大多数IDE和验证器。将CSS和JS嵌入到HTML页面中（或其他任何事情）几乎摧毁了机会检查嵌入式语言的正确性静态。有时，嵌入语言也是如此。（PHP或ASP文档无效HTML。）你不想要语法出现错误或不一致仅在运行时。
另一个原因是两者之间有更清晰的分离你需要的东西指定：内容的HTML，CSS的布局，JS通常用于更多布局和外观。这些不映射一对一：你通常想申请布局到整个类别内容元素（因此CSS）以及外观和感觉（因此jQuery）。它们可能会有所不同内容元素改变的时间（事实上内容通常是在飞行中生成的不同的人。所以保持它们是有意义的单独的文件。

Answer 5

简答：内联Javascript很糟糕，因为内联CSS很糟糕。

Answer 6

使用javascript:协议会影响辅助功能，还会损害您的网页对SEO的友好程度。

请注意，HTML代表Hypter Text有些东西......超文本表示带有链接和引用的文本，这是锚元素<a>的用途。

当您使用javascript:'协议'时，您会滥用锚元素。由于您滥用<a>元素，Google Bot和Jaws Screen阅读器之类的内容很难“理解”您的页面，因为他们并不关心您的JS，而是关注Hyper Text ML ，特别注意锚hrefs。

如果未启用JavaScript的用户访问您的网页，也会影响您网页的可用性;您正在打破这些用户的预期功能和链接行为。它看起来像一个链接，但它不会像链接一样，因为它使用javascript协议。

您可能会想“但现在有多少人禁用了JavaScript？”但是我更喜欢用“我愿意拒绝多少潜在客户，因为他们的浏览器设置中有一个复选框？”这句话来表达这个想法。

归结为href是一个HTML属性，因此它属于您网站的信息，而不是其行为。 JavaScript定义了行为，但您永远不希望它干扰数据/信息。这个想法的缩影将是外部JavaScript文件;不使用onclick作为属性，而是将其作为JavaScript文件中的事件处理程序。

Answer 7

最糟糕的问题可能是它打破了预期的功能例如，正如其他人所指出的那样，在新窗口/标签中打开=死链接=恼火/困惑的用户。

我总是尝试使用onclick，和在页面的网址中添加一些内容，以指示触发和添加的所需功能检查页面加载以检查哈希并触发函数。

通过这种方式，您可以获得与点击，新标签/窗口甚至书签/发送链接相同的行为，如果JS关闭，事情就不会变得古怪。

换句话说，就像这样（非常简化）：

对于链接：

onclick = "doStuff()"

href = "#dostuff"

对于页面：

onLoad = if(hash="dostuff") doStuff();

Answer 8

此外，只要我们谈论弃用和语义，就可能值得指出'</a>'并不意味着'可点击' - 它意味着'锚'，并暗示与另一个链接页。因此，使用该标记切换到应用程序中的不同“视图”，而不是执行计算是有意义的。您的href属性中没有URL的事实应该表明您不应该使用锚标记。

您可以替代地将点击事件操作分配给几乎任何html元素 - 可能<h1>，<img>或<p>更合适？无论如何，正如其他人提到的那样，添加另一个属性（可能是'id'），javascript可以将其用作'hook'（document.getElementById）来获取元素并分配onclick。这样，您就可以将内容（HTML）表示（CSS）和交互性（JavaScript）分开。世界不会结束。

Answer 9

我认为这与用户在状态栏中看到的内容有关。通常，应该构建应用程序以便在未启用javascript的情况下进行故障转移，但情况并非总是如此。

随着所有垃圾邮件的发生，人们变得越来越聪明，当电子邮件看起来“笨拙”时，越来越多的人正在查看状态栏，看看该链接实际上会带来什么。

请记住添加'return false;'到链接的末尾，所以页面不会跳到用户的顶部（除非这是你正在寻找的行为）。

Answer 10

我通常有一个名为“EnableJavascript.htm”的着陆页，其上有一条重要消息，说“必须启用Javascript才能使此功能正常工作”。然后我像这样设置我的锚标签......

<a href="EnableJavascript.htm" onclick="funcName(); return false;">

这样，锚点就有了一个合法的目的地，只要有可能就会被你的Javascript功能覆盖。这会优雅地降级。虽然现在有一天，我通常会在我决定将一些Javascript添加到混合中之前构建具有完整功能的网站（这一切都消除了对此类锚点的需求）。

直接在标记中使用onclick属性是另一个主题，但我建议使用像jQuery这样的库来进行不显眼的方法。

为什么使用javascript：“协议”的链接是不好的做法？

10 个答案: