大家谈谈 javascript:void(0) 和 ### 之争？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4432 天前的主题，其中的信息可能已经有所发展或是发生改变。

至于 <a href="" 中使用 javascript:void(0) 还是一个 # 号之争可以看下面的老帖：
http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0

本次要讨论的是三个井号的使用，###，到底好不好？大家随意~不要跑题

页面切图完成到交互之前，使用<a href="###">，部分的确成品也使用###留空，防止页面滚动。

###

void

JavaScript

16 条回复 • 1970-01-01 08:00:00 +08:00

explon

2012-09-22 23:37:41 +08:00

三井号不滚动有什么渊源么?

POPOEVER

2012-09-22 23:38:30 +08:00

@explon 相当于空锚点？

NemoAlex

2012-09-22 23:57:25 +08:00

如果没有可替代的 url，我一般都不加 href

keelii

2012-09-23 00:07:40 +08:00

javascript:; 比 javascript:void(0); 简洁一些，一直用这个。用锚链接总感觉不干净^!^

chloerei

2012-09-23 00:15:34 +08:00

unobtrusive javascript，href 放实际链接。

chrisyipw

2012-09-23 00:25:18 +08:00

都不选择。

如果是切图时的占位符，# 就好。

如果不依赖 href 的用途，比如一个不跳转、没有 ajax 的按钮，那该用 button 等语义元素，cursor: pointer 即可。

如果依赖 href 的内容，比如 Twitter timeline 的用户名是真实 URL，<a href="/username" >，这样用鼠标中键点击时，可以正常地打开新页面，左键点击时，就是 ajax 的 popup。

hzlzh

2012-09-23 00:41:22 +08:00

@keelii 用 javascript:; hover之后，浏览器上的提示更闹心。另外，###的使用没有弊端吧。

@chrisyipw 讲的很对，另一中情形：如果要依赖a标签自带的css样式，也就是复用cursor: pointer 这个效果，非要做出一个hover，用###是不是一种可行的补救方法。

hzlzh

2012-09-23 00:44:03 +08:00

@chloerei 的确，href中放javascript 的事情还是要慎重，至少我本人不这样做

daweiba

2012-09-23 01:42:50 +08:00

onclick="return false"的飘过...

chrisyipw

2012-09-23 02:00:19 +08:00

@hzlzh 复用 CSS 也只是多打一些字符，即使没有 gzip 也不会对速度造成的影响。按照分离职责的原则，HTML 是内容，CSS 是呈现，不应该用内容来「折衷」，在实际场景上也可能很不妥：

现在大部分浏览器都会在悬停时显示链接的 href，我个人挺讨厌「http://www.v2ex.com/t/48511#;」这样的 href，因为一看就知道是 JS，不是实际 href，除了浪费感情之外，也无从知道想要的信息，比如 comment ID。
然后来看看移动设备，没有了悬停效果，自然不会知道这个看上去像链接的东西到底是不是链接。
在各种未知影响下，有可能 JS 加载或执行失败了，此时点击「看上去像链接」的链接时，因为是假 href，自然不能达到用户的预期效果，给用户带来很大的困扰。
再从另一方面来看，以 Twitter timeline 为例，假设 JS 是可以正常加载和正常执行，但是呢，网速很慢或者优化不足或者请求数过多（iOS 并发数不多），JS 加载时间很慢，如果此时 HTML 加载好了，并且我看到了我想要看的一个用户的名字，如果是真实 href 的话，我可以直接点名字就跳过去了，不必等 JS 加载好再点再等加载。
结合上面两个场景，再由于 href="###" 实际上会造成页面刷新，在移动设备上点击了一个 href="###" 后又没有 JS 来 preventDefault()，我的话，很可能直接关掉页面。

keelii

2012-09-23 08:33:35 +08:00

@hzlzh 我感觉凡是样式设置成 cursor: pointer 的元素都有加链接去向的需求，我一般直接用a了，用a标签的好处可以全兼容加 hover 的样式哇。void(0)也是在有Ajax请求的时候才会用到。不过我记得<a href="javascript:void(0);"></a>链接响应 form.submit() 请求的时候在IE 6里面会有问题。而且貌似还不能加行内的事件吧？

yangg

2012-09-23 09:48:25 +08:00

@hzlzh ###是有问题，之前觉得这个短一点，就使用了，结果之前一次调了半天，结果竟是它的原因，不过具体的情况记不清了。。。

hzlzh

2012-09-23 20:35:21 +08:00

@yangg 最好能起来具体问题是什么，不然还是不能驳倒 ### 不是好解

hzlzh

2012-09-23 20:42:06 +08:00

@chrisyipw
我个人推崇的是极致的做法，HTML CSS JS完全分离。下面具体说：
HTML：只包含所有的HTML标签和TEXT，坚决杜绝下列情形：
1. <script>xxx</script>
2. <a href="javascriptxxxxx">yyy</a>
3. <p style="xxx:xxx">yyy</p>
4. <style type="text/css">yyy</style>
5. Google 统计代码这样的内联JS除外
-------
对于不用###的实现点击事件失效，我用干掉 preventDefault()来达成，但是我依然把###的做法划分到了完美解决方案的一种。
-------
其实届时内容样式交互分离而已，实践起来，坚持的人就不错了。
cc @keelii

clowwindy

2012-09-23 20:48:00 +08:00

1. # 会改变当前 URL。我刷新网页习惯激活地址栏按回车，而不是点刷新（前者更快，因为只请求网页本身），有 # 的时候得把 # 去掉才行。
2. # 会插入一条历史记录，造成后退时得多点一次。
3. 如果你不需要 href，为什么要用 a 标签？

hzlzh

2012-09-23 20:57:45 +08:00

@clowwindy 答：
1. 关于地址栏的URL被更改，我有考虑到，于是写了下面这个script解决了 #的情形，### 目前继续更改地址栏URL
https://github.com/hzlzh/Anchor-Scroll
2. 历史记录在所难免，劣势了
3. 有的时候href是html预留出来的，之后PHP或python语言返回的value 可能是URL可能是/，也能是#来占位。另外也有之前我说过的问题，仅仅是因为懒想复用a标签的鼠标样式而已。