有没有特别好的理由在针对 JavaScript 的链接上继续使用 href='#' ?

4

众所周知,像这样的代码非常常见:

<a href='#' class='edit'>Edit</a>

然后将其连接到事件处理程序(使用jQuery或最新的技术)

甚至可以使用内联js处理程序

<a href='#' onclick='editThis()'>Edit</a>

我知道在链接上展示鼠标指针/手形光标可能是一种懒惰的方式,但只需使用以下CSS即可轻松更正:

  a {
       cursor:pointer;
  }

(在样式表中写一次比在每个链接中写href ='#'需要更少的时间)

在链接中使用href='#'也有一个非常烦人的不便,如果由于某些原因处理程序没有机会附加到元素上(鼠标触发快速用户,不耐烦的类型等),它会导致浏览器跳转到页面顶部。

我的问题是,继续使用href='#'是否有特别好的理由?

删除它是否会在某些特定情况下破坏某些浏览器行为?

编辑:对于这个问题,我得到了一些非常随意的答案,也许我应该澄清一下。

问题是:如果我通过css设置手指光标(和下划线和颜色-感谢Borealid),我是否可以完全摆脱href属性

这个问题不是关于最佳href是什么或者应该如何附加事件处理程序的。


6
就我个人而言,如果点击某个元素没有导航功能,那么它就不应该是<a>标签。类似于https://dev59.com/YHVC5IYBdhLWcg3w9GLM 和 https://dev59.com/gnVC5IYBdhLWcg3wlyMo。 - Chris Nash
@Chris,谢谢你提供的链接,我搜索了一下但没有找到这些。 - Ben
5个回答

2

最好的做法是,如果用户禁用了JavaScript或想在新标签页中打开编辑屏幕,则应链接到该页面:

<a href="/edit-profile/" class="edit-profile-link">Edit Profile</a>

这样,如果出现任何问题,就不会丢失任何功能。

当然,构建一个AJAX编辑屏幕和标准编辑屏幕需要更多的工作。如果您不想做所有这些工作,也不关心没有使用Javascript的用户,可以使用以下方法:

<a href="javascript:;" class="edit-profile-link">Edit Profile</a>

感谢第一个建议。对于第二个建议,href="javascript:;"似乎比写href='#'或者根本不写href更麻烦 :) - Ben
@Ben 在整个网站的范围内,这种差异微不足道。这种差异少于一秒钟。 - Alec Gorge

2

通常我不使用a标签进行js调用,这样做会显得懒惰并产生你所说的响应。如果我要使用锚点,则完全可以使用它,但如果不需要,请使用类作为选择器,并在css中完成其余部分。


0

使用CSS更好。不,移除#不会破坏浏览器行为。然而,你所拥有的CSS并不完全足够:你还需要改变文本颜色和下划线样式,以及实现悬停处理和可选地区分已访问链接。


请勿纠结于注释,保持话题和建设性。 - BoltClock

0
在这种情况下设置 href="#" 基本上是想要停止事件的默认行为。我实际上已经回答了一个类似的问题,在这里

有点有趣的是,问题甚至提到点击重置页面水平位置,并且有效地像一个锚点到页面顶部? - Micromega
从你的链接中:有时我不喜欢 # 解决方案,因为它会搞乱滚动条 - 点击后滚动条总是会回到顶部。因此,这个链接仍然被视为触发一个操作。- Grace Shao 9小时前 - Micromega

0

从纯粹主义的角度来看,我认为不包括href属性会破坏网页。如果浏览器不支持JavaScript,则链接对他们无效。这是一个纯粹主义者的观点--仅将href指向“#”并没有任何区别。

过去,您只使用锚点而没有href来指定页面上的占位符,但现在看来,在HTML5中使用没有href的锚标记被认为已经过时了:

http://www.html-5.com/changes/deprecated/a-name-tag.html

因此,纯粹主义的观点是你会破坏网页。

现实主义的观点是,如果您必须在CSS中重新整合一些浏览器免费提供的行为,因为HTML的原因 - 那么意味着浏览器不满意您HTML中的某些内容。而且鉴于没有 href 的锚点正在被弃用。常识告诉我继续使用 href="#" 以避免在处理由于DOM的轻微违规而引起的奇怪的基于浏览器的错误时出现令人沮丧的时刻。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接