码迷,mamicode.com
首页 > 其他好文 > 详细

从读者到开发技术者

时间:2017-01-19 20:06:31      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:多少   java后台   高分数的成绩

我再来提供一个视角吧。

<a>标签增加href属性,就意味着以下事情:

  • :link选择器可以选择到它

  • 这个a标签可以获得焦点(可以通过tab按键访问到)

  • 在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。

绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:

  • <a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性)

  • 优雅降级,在网络连接很差,还没有加载到CSS的时候,<a>依然有手型与正常的link样式。

<a>标签以href属性,并不连接到实际的页面的方案有:

  1. <a href="#"></a>

  2. <a href="#nogo"></a>

  3. <a href="##"></a>

  4. <a href="###"></a>

  5. <a href="javascript:void(0);"></a>

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

  7. <a href="javascript:;"></a>

  8. <a href="javascript:"></a>

他们的体验有细微的差别。

  • 1,点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件。

  • 2有了初步的语义。但是,如果页面里面有id为nogo的元素,点击这个链接后,锚点机制会作用,页面贴齐这个元素上缘。更详细的,详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题

  • 3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。见下方测试。

  • 5~8作用相同,但使用了javascript伪协议。在IE6下面,未加分号的方案6和方案8被点击后,IE6会使得页面中的gif暂停,并且触发onbeforeunload事件(详情参考这里),IE6认作这个页面有了重定向,并abort之后所有的请求(参考这里)。所以假如你在此之后替换了一个<img>的src,IE6完全不会完成这个新的请求。

我更倾向于使用方案4。

至于语义上LZ这种<a href="javascript:void(0)">使用方式,这个贴里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。


更新,我做了如下的测试:

        <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>
  • 在IE11中,点击###、####和#####时,页面不再跳转到头部

  • 在chrome中,点击##、###、####和#####时,页面不再跳转到头部。

  • 但是在IE11和chrome中,点击所有的<a>都会造成地址栏的修改,并触发hashchange事件。

所以之前说的“###不会造成地址栏的改变”是错误的。

没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。


本文出自 “桃子” 博客,转载请与作者联系!

从读者到开发技术者

标签:多少   java后台   高分数的成绩

原文地址:http://4259784.blog.51cto.com/4249784/1893238

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!