zoukankan      html  css  js  c++  java
  • href="#" href="javascript:void(0);" href="###"

    #"包含了一个位置信息,默认的锚点是#top 也就是网页的上端。

    而javascript:void(0)  仅仅表示一个死链接,这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,而javascript:void(0) 则不是如此,所以调用脚本的时候最好用void(0)

    如果是个# ,就会出现跳到顶部的情况,有几种解决方法:
    1:<a href="####"></a>
    2:<a href="javascript:void(0)"></a>  //void(0)表示不作任何操作,用来阻碍事件的默认操作,这样会防止链接跳转到其他页面。
    3:<a href="javascript:void(null)"></a>
    4:<a href="#" onclick="return false"></a>   //比较少用
    5:<span style="cursor:hand"></span>(好像在FF中不能显示)

    -------------------------------------------------------------------------------

    慎用JavaScript:void(0) 

    JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

    void 操作符用法格式如下: 
    1. javascript:void (expression)
    2. javascript:void expression 

    expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。 (实现版本  Navigator 3.0  )

    你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。

    下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。

    <a href="javascript:void(0)">单击此处什么也不会发生</a>

    下面的代码创建了一个超级链接,用户单击时会提交表单。

    <a href="javascript:void(document.form.submit())">

    如果想定义一个空的链接,又不跳转到页面头部,可以写href="###"。详细解释就是'#' 是有特定意义的,如果 '#' 后有内容会被认为是一个标签而从页面找到相应标签跳转到该处,找不到时会跳到页首, '###' 其实就是一个无意义的标签指定,也就是一个 '#' 和不存在的标签 '##' 的组合,页面中找不到命名为 '##' 的 <a> 时该链接就不会发生跳转,也就不会导致执行 onclick 中的内容时突然发生页面跳到页首的问题。'###' 只是一种使用者习惯,如果你愿意,可以随便找一个跳转不到的标签作为命名。说白了"###" 就是一个不是锚点的字符串 浏览器找不到也不会跳到页首,原理就是依赖了网页的报错机制,找不到就不做处理。

         有些人说,不喜欢“###”因为他会改变链接。都是使用一直用javascript:void(0)或者javascript:。href="javascript:void(0);"但也有人说用href="javascript:void(0);"可能会有浏览器兼容问题。在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

         javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。 2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。

    -------------------------------------------------------------------------------

    w3school中关于void的介绍:

    void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值,例如,从 HTML 的 <a> 元素调用 JavaScript 函数时。要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。例如:

    <a href="javascript:window.open('about:blank')">Click me</a>

    如果把这行代码放入 HTML 页面,点击其中的链接,即可看到屏幕上显示 "[object]"。TIY

    这是因为 window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。

    要避免这种效果,可以用 void 运算符调用 window.open() 函数:

    <a href="javascript:void(window.open('about:blank'))">Click me</a>

    这使 window.open() 调用返回 undefined,它不是有效值,不会显示在浏览器窗口中。

    提示:请记住,没有返回值的函数真正返回的都是 undefined。

    ——————————————————————————————————————————————

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

      :link选择器可以选择到它

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

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

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

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

      优雅降级,在网络连接很差,还没有加载到CSS的时候,<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>

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

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

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

      3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。正常的点击不会在地址栏增加#,但若用户使用open in new tab的方式(比如中键),就会跳到形如http://segmentfault.com/q/1010000000339082###的地址,见下方测试。

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

    测试:

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

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

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

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

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

     

    参考:

    http://www.w3school.com.cn/js/pro_js_operators_unary.asp

    http://www.jb51.net/article/34156.htm

    http://c.jinhusns.com/bar/t-829

    http://www.chinacloud.cn/show.aspx?id=15041&cid=22

  • 相关阅读:
    2020/3/21 简单的学习
    2020/3/7 A-B
    2020/3/6 旋转骰子
    2020/3/6 美丽数组
    面向对象程序设计寒假作业2
    自我介绍
    深度优先搜索-迷宫问题(走迷宫题解)
    开机方案题解
    好吃的巧克力题解
    数楼梯题解
  • 原文地址:https://www.cnblogs.com/shiddong/p/5652591.html
Copyright © 2011-2022 走看看