zoukankan      html  css  js  c++  java
  • a标签中的href:JavaScript:void(0) # 等

    参考自:http://segmentfault.com/q/1010000000339082

    给<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完全不会完成这个新的请求。

    至于语义上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事件。

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

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


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

  • 相关阅读:
    hiveserver2 with kerberos authentication
    python Basic usage
    python Quicksort demo
    Python HeapSort
    mrunit for wordcount demo
    CCDH证书
    Hadoop question list
    Hadoop Yarn core concepts
    Hadoop Resource
    Hadoop could not find or load main class
  • 原文地址:https://www.cnblogs.com/hzwl-2015/p/4729818.html
Copyright © 2011-2022 走看看