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. 让vs只启动自己想调试的站点

    VS中里面多个WEB项目如何只启动一个? 每次启动时,右下角都会出现一堆的 网站有10来个.即使设置了默认启动项目, 但每次按F5启动,或者哪怕是在项目上右键启动新实例 右下角都会出现这一堆的站点 有 ...

  2. openvas-tutorial-for-beginners

    https://jonathansblog.co.uk/openvas-tutorial-for-beginners

  3. python系列十四:Python3 文件

    #!/usr/bin/python #Python3 文件 from urllib import requestimport pprint,pickle'''读和写文件open() 将会返回一个 fi ...

  4. LINUX的LAMP环境搭配

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

  5. Android程序运行时权限与文件系统权限的区别

    apk程序是运行在虚拟机上的,对应的是Android独特的权限机制,只有体现到文件系统上时才使用linux的权限设置. (1)Android中的apk必须签名 (2)基于UserID的进程级别的安全机 ...

  6. Python多进程multiprocessing

    import multiprocessing import time # 具体的处理函数,负责处理单个任务 def func(msg): # for i in range(3): print (msg ...

  7. app开发团队人员构成怎么分配?国内著名的app开发团队有哪些

    app开发团队人员构成:作为一个独立的app开发团队,人员架构必须包括产品经理,程序开发人员,测试专员,运营团队,UI 设计.这里是对专业的App开发公司而言,一般个人或团队可能一个人会身兼多职,所以 ...

  8. 剑指offer 面试64题

    题目:64题 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 解法一:利用Python特性 # -*- ...

  9. hibernate 操作 Postgresql 数据库报 operator does not exist: integer = character varying

    网上的说法如下: Java开发Postgresql 数据库兼容应用的问题,与Oracle有一些不同: Java类型映射数据库类型的不同,Oracle jdbc驱动程序处理Java String类型可正 ...

  10. String和StringBufffer的区别

    string的字符串操作都是废弃已有的对象,开辟一个新的内存空间创建一个新的对象 比如一个string str= "字符串"; str += "a"; 这样的操 ...