zoukankan      html  css  js  c++  java
  • <a>标签点击不跳转

    HTML中的<a></a>标签点击不跳转的方法

    一、<a href="####" ></a>
    使用这个方法我们会发现<a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP,“#”包含了一个位置信息

    二、<a href="javascript:void(null)"></a>

    三、<a href="javascript:void(0)"></a>

    四、<a href="#" onclick="return false"></a>

    以上这四种方法表示是一个死链接,既不会跳转也不会返回到顶部

    Void是JavaScript中的运算符,出现在操作数之前,操作数可以是任何类型,操作数会照常计算,但忽略计算结果并返回undefined。由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序更具语义,避免表达式返回值。 

    
    void 操作符用法格式:

    1. javascript:void (expression)

    2. javascript:void expression

    console.log(void 0); // undefined
    console.log(void(0)); // undefined
     

    作用一:替代undefined

    由于undefined并不是一个关键字,其在IE8-浏览器中会被重写,在高版本函数作用域中也会被重写;所以可以用void 0 来替换undefined

    作用二:客户端URL

    这个运算符最常用在客户端URL——javascript:URL中,在URL中可以写带有副作用的表达式,而void则让浏览器不必显示这个表达式的计算结果。例如,经常在HTML代码中的<a>标签里使用void运算符

    <a href="javascript:void window.open();">打开一个新窗口</a>

    作用三:阻止默认事件

    阻止默认事件的方式是给事件置返回值false

    //一般写法
    
    <a href="http://example.com" onclick="f();return false;">文字</a>

      使用void运算符可以取代上面写法

    <a href="javascript:void(f())">文字</a>

    在这里面,void是一个操作符,会计算一个表达式,但是不会返回值,当然也就不会改变当前页面的任何内容,也就不会正常的跳转。
    说明

    void 运算符对表达式求值,并返回 undefined。在希望求表达式的值,但又不希望脚本的剩余部分看见这个结果时,该运算符最有用。 

    链接(href)直接使用JavaScript:void(0)在IE中可能会引起一些问题,比如造成gif动画的停止播放等,所以比较安全的方法还是使用“#”。为了防止点击链接后跳转到页首,onclick事件return false即可。

  • 相关阅读:
    COM组件
    【游戏引擎架构】入门(一)
    UNICODE字符串
    Python随笔10
    Python随笔9-函数
    Python随笔7
    Python随笔6
    Python随笔5
    Python随笔4
    Python随笔3
  • 原文地址:https://www.cnblogs.com/chrischan/p/6662352.html
Copyright © 2011-2022 走看看