扫码关注官方订阅号
这样写为什么不好?
人生最曼妙的风景,竟是内心的淡定与从容!
修正一个说法上的bug吧。对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下。
javascript:
我再来提供一个视角吧。
给<a>标签增加href属性,就意味着以下事情:
<a>
tab
cursor:pointer
绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:
给<a>标签以href属性,并不连接到实际的页面的方案有:
<a href="#"></a>
<a href="#nogo"></a>
<a href="##"></a>
<a href="###"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:;"></a>
<a href="javascript:"></a>
他们的体验有细微的差别。
<img>
我更倾向于使用方案4。
至于语义上LZ这种<a href="javascript:void(0)">使用方式,这个贴里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。
<a href="javascript:void(0)">
更新,我做了如下的测试:
<p> <a href="#">#</a> </p> <p> <a href="##">##</a> </p> <p> <a href="###">###</a> </p> <p> <a href="####">####</a> </p> <p> <a href="#####">#####</a> </p> <script type="text/javascript"> var n = 0 ; window.onhashchange = function(){ alert(++n) ; } </script>
所以之前说的“###不会造成地址栏的改变”是错误的。
没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。
这么写没什么不好的,表明该部分的外观像链接,鼠标需要手型,需要响应点击,但没有实际动作。用来替代href="#"。这种写法实质上并不算做html混杂js。
href="#"
无论是用#还是void(0),有一个共同的缺点在于:这样做就让这个行为,必须启用js才能实现。别笑,虽然说大多数人是加载js的,但也不能排除连接故障等意外,或真的有少数狂人不用js。另外,js也不能被搜索引擎所跟踪,这是个需要考虑的问题。
#
void(0)
从这个意义上讲,#甚至更差一些,因为单独的#在语义上,其实隐含着指向了网页自己,如果使用“在新标签页中打开”时就会产生迷惑。而这个问题void(0)没有。
所以最好能做到以下二者其一:
注:其实真正不好的写法是<a href="javascript:void(0)" onclick="functionclick();">,真正的在html中混杂js行为,让html的工作者时刻做“别把哪段js不小心删了”这种不必要的担心。正确的做法应该是对<a>定义id属性,然后通过id后绑定click等事件。
<a href="javascript:void(0)" onclick="functionclick();">
很多网站都这么做:微博、腾讯、虾米等等……
反正我个人是很不喜欢这种做法
另一种做法是像这个页面右边的“邀请回答”那样,<a href="#">。我也很不喜欢。
<a href="#">
原因是一样的:因为我见到链接常常会右键 open in new tab。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我再来提供一个视角吧。
给
<a>标签增加href属性,就意味着以下事情:tab按键访问到)<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。绑定了onclick事件的
<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:<a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性)<a>依然有手型与正常的link样式。给
<a>标签以href属性,并不连接到实际的页面的方案有:<a href="#"></a><a href="#nogo"></a><a href="##"></a><a href="###"></a><a href="javascript:void(0);"></a><a href="javascript:void(0)"></a><a href="javascript:;"></a><a href="javascript:"></a>他们的体验有细微的差别。
<img>的src,IE6完全不会完成这个新的请求。我更倾向于使用方案4。
至于语义上LZ这种
<a href="javascript:void(0)">使用方式,这个贴里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。更新,我做了如下的测试:
<a>都会造成地址栏的修改,并触发hashchange事件。所以之前说的“###不会造成地址栏的改变”是错误的。
没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。
这么写没什么不好的,表明该部分的外观像链接,鼠标需要手型,需要响应点击,但没有实际动作。用来替代
href="#"。这种写法实质上并不算做html混杂js。无论是用
#还是void(0),有一个共同的缺点在于:这样做就让这个行为,必须启用js才能实现。别笑,虽然说大多数人是加载js的,但也不能排除连接故障等意外,或真的有少数狂人不用js。另外,js也不能被搜索引擎所跟踪,这是个需要考虑的问题。从这个意义上讲,
#甚至更差一些,因为单独的#在语义上,其实隐含着指向了网页自己,如果使用“在新标签页中打开”时就会产生迷惑。而这个问题void(0)没有。所以最好能做到以下二者其一:
注:其实真正不好的写法是
<a href="javascript:void(0)" onclick="functionclick();">,真正的在html中混杂js行为,让html的工作者时刻做“别把哪段js不小心删了”这种不必要的担心。正确的做法应该是对<a>定义id属性,然后通过id后绑定click等事件。很多网站都这么做:微博、腾讯、虾米等等……
反正我个人是很不喜欢这种做法
另一种做法是像这个页面右边的“邀请回答”那样,
<a href="#">。我也很不喜欢。原因是一样的:因为我见到链接常常会右键 open in new tab。