<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即可。
<a>标签点击不跳转的更多相关文章
- a标签点击不跳转的几种方法
a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...
- jquery 执行a 标签 点击事件 跳转href 路径
<a href="./export.pdf" id="pdfdown" download="文件名.pdf">下载</a& ...
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 点击<a>标签后禁止页面跳至顶部
一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...
- a标签不用点击模拟跳转url。
因为请求到数据前要判断用户是否是登录状态, 所以就想页面数据请求成功,就跳转到登录页面, 就用了location.href = url. 结果因为同源策略不能访问, 没想到a标签竟然可以直接跳转这个U ...
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...
- <a>多颜色标签点击之后保持原色的一次实践, Ext Panel下解决及通用方案思路
代码为片段, 需要自行设置全部环境方可全部运行. 案例背景 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下: 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方. ...
随机推荐
- C语言结构体数组内带字符数组初始化和赋值
1.首先定义结构体数组: typedef struct BleAndTspRmtCmd{ char terminal[3]; char note[3]; char rmtCmd[10]; char c ...
- mysql练手
1.根据图创建下列表格 没有外键的表先创建,创建顺序为teacher,class,course,student CREATE TABLE class ( cid INT NOT NULL auto_i ...
- Git中如何将代码恢复到之前某个节点
本文主要讲如何使用小乌龟软件将代码恢复到之前某个节点. 一 说明 在实际项目开发中,都是很多人一起联合开发,往往会遇到这种情况:马上要发版本了,突然发现一个致命BUG,而这个BUG是由于某个小伙伴修改 ...
- CF85D Sum of Medians
CF85D Sum of Medians 题意翻译 一个集合,初始为空.现有三个操作: 1.add:向集合里加入数x,保证加入前集合中没有数x: 2.del:从集合中删除数x,保证删除前集合中有x: ...
- diff工具
Beyond Compare 4 可以diff文件夹.单个文件.
- 画图-drawpoint and drawpath
版权声明:本文因海牛宝宝童鞋才疏学浅,可能晦涩难懂,但也是呕心沥血之作,麻烦转载的时候留个申明. https://blog.csdn.net/u012321815/article/details/26 ...
- C# W3 调试
如果在调试附加进程中 没W3进程的话, 在运行里输入 uac 设置为从不通知 即可:
- 安卓手机开机键失灵,FASTBOOT模式ADB重启
安装ADB工具 CMD指令fastboot reboot
- Google Cloud Platfrom中运行基础的Apache Web服务
Links: https://cloud.google.com/compute/docs/tutorials/basic-webserver-apache 步骤: 1.安装Apache 2.重写Apa ...
- Python进阶(5)_进程与线程之协程、I/O模型
三.协程 3.1协程概念 协程:又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存 ...