a标签中关于javascript:void(0)的几个问题

时间:2023-02-21 09:49:28

最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅。注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明。

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

目前有如下几种解决办法:

1)点击链接后不做任何事情

  1. 1.<a href="javascript:void(0);" >test</a>
  2. 2.<a href="javascript:;" >test</a>
  3. 3.<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的

2)点击链接后,响应用户自定义的点击事件

  1. 1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
  2. 2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
  3. 3.<a href="#" onclick="alert();event.returnValue=false;">test</a>

说明:

1.javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)

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

3.如果仅仅是想鼠标移过,变成手形,可以使用

<span style="cursor:pointer" onclick="foo()">Click Me!</span>

void是javascript的操作符,意思是:只执行表达式,但没有返回值, 
void 操作符用法格式如下:

  1. 1. javascript:void (expression)
  2. 2. javascript:void expression

为了程序风格良好,建议使用第二种带上括号的

我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。 
关键是只要知道void是javascipt自身的操作符,它表示的是只执行表达式,但没有返回值!

另外页面会自动调回顶端,是因为"#"默认的瞄点位置是top,所以会出现这种情况。

a标签中关于javascript:void(0)的几个问题的更多相关文章

  1. a标签的href&equals;&quot&semi;javascript&colon;void&lpar;0&rpar;&quot&semi;和href&equals;&quot&semi;&num;&quot&semi;的区别

    修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...

  2. a标签使用href&equals;”javascript&colon;void&lpar;0&rpar;&semi; 在火狐浏览器跟chrome 不兼容

    使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...

  3. 为了防止页面重新自动加载,可以给a标签设置href&equals;&quot&semi;javascript&colon;void&lpar;0&rpar;&semi;&quot&semi;

    <a href="javascript:void(0);"></a> <!--按照格式要求,此处的0不能省略!! 虽然省略看上去也没什么影响.但是当发 ...

  4. 一个好玩的小制作,以及在&lt&semi;a&sol;&gt&semi;中的标签href&equals;&quot&semi;javascript&colon;&semi;&quot&semi;&sol;href&equals;&quot&semi;javascript&colon;void&lpar;0&rpar;&semi;&quot&semi;&sol;href&equals;&quot&semi;javascript&colon;&quot&semi;的用法

    一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...

  5. javascript中a标签把href属性设置为&OpenCurlyDoubleQuote;javascript&colon;void&lpar;0&rpar;”还是会打开空白页面的问题

    在项目中有个位置的点击a标签这里要加一个权限判断,但是之前使用的是js动态添加a标签,href的属性值是一个url,但是我要做权限判断之后,我的url就不能设置在href属性中了,这样的话我可以在a标 ...

  6. a标签中的href&equals;&quot&semi;&num;&quot&semi;与href&equals;&quot&semi;javascript&colon;void&lpar;0&rpar;&quot&semi;区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  7. 兼容 火狐、IE 的中a标签用 javascript&colon;void&lpar;0&rpar;&semi; 依然执行跳转的问题

    <a onclick="return false;" href="javascript: void(0)" target="_blank&quo ...

  8. a标签中的javascript:void(0)和&num;的区别

    #包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0)   仅仅表示一个死链接 void(0)用于执行某些处理,但是不整体刷新页面 javascript:v ...

  9. 超级链接a中javascript&colon;void&lpar;0&rpar;弹出另外一个框问题

    转字:http://my.oschina.net/castusz/blog/68186 结果在IE.Firefox.Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式. ...

  10. js中 javascript&colon;void&lpar;0&rpar; 用法详解

    点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...

随机推荐

  1. js函数前面写上分号的原因

    说个之前先说,网站上传一些文件,考虑到性能问题,会用一些压缩软件来压缩代码(grunt,glup,webpack,etc..),这时候就可能出现一个问题.看下面代码 (function a(){... ...

  2. jquery&period;chosen&period;js实现模糊搜索

    jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true ...

  3. Oracle的spool命令

    在控制台上使用spool 路径+文件名 命令可以将整个过程写入指定的文件中, 结束使用spool off 命令, 当执行spool off后文件中的内容才能看见; ed命令修改当前缓冲区的上一条命令;

  4. 拓扑排序 HDU - 5695

    众所周知,度度熊喜欢各类体育活动. 今天,它终于当上了梦寐以求的体育课老师.第一次课上,它发现一个有趣的事情.在上课之前,所有同学要排成一列, 假设最开始每个人有一个唯一的ID,从1到NN,在排好队之 ...

  5. Java基本语法-----java变量

    1.变量的概述 用于存储可变数据的容器. 2.变量存在的意义 计算机主要用于处理生活中的数据,由于生活中存在大量的可变数据,那么计算机就必须具备存储可变数据的能力. 比如: 1.时间每一秒都在发生变化 ...

  6. springboot后台运行

    nohup java -jar shareniu.jar >out.txt &

  7. js实现word转换为html

    前言 最近接到一个需求,实现上传一个word文档,然后将该word转换成html丢给服务端存上.进行技术调研后发现有三种方法可以实现这个功能:ActiveXObject.docx2html.mammo ...

  8. springboot&plus;mockito 异常解决方案

    系统启动的异常日志如下 javax.net.ssl.* java.lang.IllegalStateException: Failed to load ApplicationContext at or ...

  9. typescript handbook 学习笔记1

    概述 这是我学习typescript的笔记.写这个笔记的原因主要有2个,一个是熟悉相关的写法:另一个是理清其中一些晦涩的东西.供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看 ...

  10. CRM rbac 组件的应用

    1 拷贝 rbac 组件到项目中,注册这个app 2 数据库迁移 1 删除rbac下migrations里除了init外的文件 2 修改用户表 class User(models.Model): &q ...