没有href属性的锚标签安全吗?

Is it okay to use an anchor tag without including the href attribute, and instead using a JavaScript click event handler? So I would omit the href completely, not even have it empty (href="").

使用锚标记而不包含href属性，而是使用JavaScript单击事件处理程序，这样可以吗?因此我将完全省略href，甚至不让它为空(href="")。

9 个解决方案

#1

172

In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."

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

Example:

例子:

<a>previous</a>

Look for "placeholder hyperlink" on the w3c anchor tag reference page: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element.

在w3c锚标记参考页面上寻找“占位符超链接”:https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the- element。

And it is also mentioned on the wiki here: https://www.w3.org/wiki/Elements/a

这里的wiki上也提到了:https://www.w3.org/wiki/Elements/a

A placeholder link is for cases where you want to use an anchor element, but not have it navigate anywhere. This comes in handy for marking up the current page in a navigation menu or breadcrumb trail. (The old approach would have been to either use a span tag or an anchor tag with a class named "active" or "current" to style it and JavaScript to cancel navigation.)

占位符链接适用于需要使用锚点元素，但不需要在任何地方导航的情况。这对于在导航菜单或面包屑路径中标记当前页面非常有用。(旧的方法是要么使用span标记，要么使用带有名为“active”或“current”类的锚标记来样式化，而使用JavaScript来取消导航)。

A placeholder link is also useful in cases where you want to dynamically set the destination of the link via JavaScript at runtime. You simply set the value of the href attribute, and the anchor tag becomes clickable.

当您希望通过JavaScript在运行时动态设置链接的目的地时，占位符链接也很有用。只需设置href属性的值，锚标记就可单击。

#2

It is OK, but at the same time can cause some browsers to become slow.

它是可以的，但同时也会导致一些浏览器变得缓慢。

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

My advice is use <a href="#"></a>

我的建议是使用

If you're using JQuery remember to also use:

如果您正在使用JQuery，请记住也要使用:

.click(function(event){
    event.preventDefault();
    // Click code here...
});

#3

Short answer: No.

简短的回答:没有。

Long answer:

长一点的回答:

First, without an href attribute, it will not be a link. If it isn't a link then it wont be keyboard (or breath switch, or various other not pointer based input device) accessible (unless you use HTML 5 features of tabindex which are not universally supported). It is very rare that it is appropriate for a control to not have keyboard access.

首先，没有href属性，它就不是链接。如果它不是一个链接，那么它就不会是键盘(或呼吸开关，或其他各种非基于指针的输入设备)可访问的(除非您使用的是tabindex的HTML 5特性，而这并不是普遍支持的)。很少有控件可以不使用键盘访问。

Second. You should have an alternative for when the JavaScript does not run (because it was slow to load from the server, an Internet connection was dropped (e.g. mobile signal on a moving train), JS is turned off, etc, etc).

第二。当JavaScript不运行时，您应该有另一种选择(因为从服务器加载缓慢，Internet连接被删除(例如移动列车上的移动信号)，JS被关闭，等等)。

Make use of progressive enhancement by unobtrusive JS.

使用不显眼的JS进行渐进式增强。

#4

The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.

标签可以在没有href属性的情况下使用。与这里的许多答案相反，在没有href的情况下，实际上有创建锚点的标准原因。从语义上讲，“a”表示锚或链路。如果你用它来做任何有意义的事情，那么你就很好。

One standard use of the a tag without an href is to create named links. This allows you to use an anchor with name=blah and later on you can create an anchor with href=#blah to link to the named section of the current page. However, this has been deprecated because you can also use IDs in the same manner. As an example, you could use a header tag with id=header and later you could have an anchor pointing to href=#header.

没有href的标签的一个标准用法是创建命名链接。这允许您使用名称=blah的锚，稍后您可以使用href=#blah创建一个锚，链接到当前页面的指定部分。但是，由于您也可以以同样的方式使用id，所以不赞成这样做。例如，您可以使用id=header的头标记，稍后您可以有一个指向href=#header的锚。

My point, however, is not to suggest using the name property. Only to provide one use case where you don't need an href, and therefore reasoning why it is not required.

然而，我的观点并不是建议使用name属性。只提供一个不需要href的用例，并因此推理为什么不需要href。

#5

If you have to use href for backwards compability, you can also use

如果必须使用href进行向后压缩，也可以使用href

<a href="javascript:void(0)">link</a>

instead of # ,if you don't want to use the attribute

而不是#，如果您不想使用属性

#6

The <a> tag without the "href" can be handy when using multi-level menus and you need to expand the next level but don't want that menu label to be an active link. I have never had any issues using it that way.

不带“href”的标记在使用多级菜单时很方便，您需要扩展下一级，但不希望菜单标签是活动链接。我从来没有遇到过这样的问题。

#7

From an accessibility perspective <a> without a href is not tab-able, all links should be tab-able so add a tabindex='0" if you don't have a href.

从可访问性的角度来看 <没有href的> 是不可制表的，所有链接都应该是可制表的，所以如果没有href，就添加一个tabindex='0"。

#8

In some browsers you will face problems if you are not giving an href tag. I suggest you to write your code something like this :

在某些浏览器中，如果不提供href标记，就会遇到问题。我建议你这样写你的代码:

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

you can replace yourcode() with your own function or logic,but do remember to add return false; statement at the end.

您可以用您自己的函数或逻辑来替换您的代码()，但是请记住添加返回false;最后声明。

#9

I was able to make this work:

我做到了:

<a id="dumb-button" href="#" onclick="return false;">Link</a>

and it ignores the click. Then I use jQuery to catch the "dumb-button" click and to trigger my code (hide some divs / show a div).

它会忽略点击。然后我使用jQuery来捕捉“dumb-button”点击并触发我的代码(隐藏一些div /显示一个div)。

#1

172