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即可。

<a>标签点击不跳转的更多相关文章

  1. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  2. jquery 执行a 标签 点击事件 跳转href 路径

    <a href="./export.pdf" id="pdfdown" download="文件名.pdf">下载</a& ...

  3. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  4. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  5. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  6. 点击<a>标签后禁止页面跳至顶部

    一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...

  7. a标签不用点击模拟跳转url。

    因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...

  8. 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

    问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...

  9. <a>多颜色标签点击之后保持原色的一次实践, Ext Panel下解决及通用方案思路

    代码为片段, 需要自行设置全部环境方可全部运行. 案例背景 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下: 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方. ...

随机推荐

  1. Adjacency List

    w Python Patterns - Implementing Graphs | Python.orghttps://www.python.org/doc/essays/graphs/ Graph ...

  2. 转:使用awk命令获取文本的某一行,某一列

    1.打印文件的第一列(域)                 : awk '{print $1}' filename2.打印文件的前两列(域)                 : awk '{print ...

  3. ABAP锁,数据库锁

    原文出自 江正军 技术博客,博客链接:www.cnblogs.com/jiangzhengjun ABAP数据锁定 SM12锁查看与维护 通用加锁与解锁函数 ABAP程序锁定 数据库锁 锁的分类和兼容 ...

  4. 20170520 BADI增强学习

    一.要求:Tcode:FF_5 导入数据运行时,产生财务凭证之前修改某些字段值.Exmp:FEBRE-VWEZWBKPF-XBLNRFEBEP-CHECTBSEG-ZUONR there is a b ...

  5. windows下python调用c文件流程

    1.新建fun.c文件和fun.h文件 #include <stdio.h> #include <stdlib.h> #include <string.h> int ...

  6. 剑指offer 面试31题

    面试31题: 题目:栈的压入.弹出元素 题:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序 ...

  7. JQuery 操作 checkbox 二次赋值无效 attr ----> prop

    CheckBox .attr('checked',false);  Chrome和火狐第二次点击无效. 然后解决了把attr 改成了 prop 以后操作属性的时候各位记下,用prop 因为大家用的都是 ...

  8. Mac 远程连接 Windows 系统无法全屏

    远程连接之后,Mac 工具栏中 配置 RDC 下 “首选项”. “显示” ----远程桌面大小:全屏 ----打开远程桌面窗口:第二显示器(我用的是双显示器,根据实际情况设定显示器) 配置完成后,点击 ...

  9. Js onload 解析

    Js onload的使用方法. 1.在script中调用 window.onload = function(){ function1(); function2(); function3(); }; 或 ...

  10. rails 下载 send_file

    def download send_file File.join(Rails.root, "public", @doc.link), :filename => @title+ ...