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. 自定义表单验证--jquery validator addMethod的使用

    原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...

  2. python字符串拼接相关

    #字符串拼接#str.join(元组.列表.字典.字符串) 之后生成的只能是字符串.str = "-";seq = ("a", "b", & ...

  3. LINUX的LAMP环境搭配

    在ubuntu linux下以编译方式安装LAMP(apache mysql php)环境 最近转向到了使用ubuntu做 桌面,安装好系统以来一直都没配置lamp开发环境.由于很久以来没有自己编译安 ...

  4. python获取当前目录路径和上级路径

    在使用python的时候总会遇到路径切换的使用情况,如想从文件夹test下的test.py调用data文件夹下的data.txt文件: . └── folder ├── data │ └── data ...

  5. linux 安装zip/unzip/g++/gdb/vi/vim等软件

    近期公司新配置了一台64位云server.去部署的时候发现,没有安装zip/unzip压缩解压软件. 于是仅仅好自己安装这两个软件.linux最好用的还是yum. 两个指令就安装好了. 首先把软件安装 ...

  6. Cocos2d-x3.0游戏实例之《别救我》第八篇——TiledMap实现关卡编辑器

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/musicvs/article/details/25368273 好吧.我真心全然搞不懂.我如今仅仅只 ...

  7. sql server分区

    1. 创建分区 分区步骤:1.创建分区函数  2.创建分区架构 3.创建分区索引(聚集)   --1. 创建分区函数 DECLARE @dt datetime SET @dt = '20030901' ...

  8. Ajax+Spring MVC实现跨域请求(JSONP)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  9. 每天一个Linux命令(38)top命令

     top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.       (1)用法:       用法:  top  [参数] top是 ...

  10. Android L 64位兼容32 应用程序的认识

    http://blog.csdn.net/louyong0571/article/details/44223481 关于Android L 64位系统兼容32位应用的实现的简单分析. Android ...