关于href="javascript:void(0)笔记

href="#"与href=“javascript:void(0)”的区别

#包含了一个位置信息,默认的锚是#top也就是网页的上端。二JavaScript:void(0),仅仅表示一个死链接。

在页面很长的时候回使用#来定位页面的具体位置,具体格式为:#+id

如果要定义一个死链接请使用javascript:void(0)



<a href = "javascript:void(0);">点我没有反应</a>

<a href ="#pos">点我定位到指定位置!</a>

<br>

...

<br>

<p id="pos">尾部定位点</a>


想让一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href=“#”,问题:当页面有滚动条时,点击后会返回到页面顶部,用户体验不好。页面会自动调回顶部,是因为“#”默认的瞄点位置是top,也就是网页的上端,所以会出现这种情况。


href=“javascipt:void(0)” 含义:让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数

<a href="javascript:void(0)">点击</a>   点击链接后不会回到网页顶部

<a href="#">点击</a>   点击后会回到网面顶部

说明:

1.javascript是伪协议,表示url的内容通过javascript执行。这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作

<a href="javascript:void(0)" onclick="window.open()">点击连接后页面不动,只打开链接

<a href="#" onclick="javascript:return false;">作用一样,但不同浏览器会有差异

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

void是javascript的操作符,意思是:只执行表达式,但没有返回值。


使用javascript方法:

<a href="#" onclick="javascript:方法;return flase">文字</a>

<a href="javascript:void(0)" onclick=“javascript:方法;return flase”>文字</a>  点击a标签即可执行方法函数

void操作符用法格式如下:

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

我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在javascript上没有任何效果,也就是说<a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。

关键是只要知道void是javascript自身的操作符,它表示的是只执行表达式,但没有返回值。

使用过ajax常见<a href="javascript:doTest2();void(0);">href</a>.关于这里的void(0),该操作符指定要计算一个表达式但是不返回值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,256评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,530评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 最近的生活真是两点一线,除了上班,每天回到家就是看看电影和综艺节目,每隔一天再健健身。可一到周末,日子终归非常无...
    新有灵郗阅读 1,105评论 0 0
  • 前些天看到微博上有人提到了一个网站,http://dedesigntheweb.com/,以后招有国际视觉的产品鲸...
    张振亚童鞋阅读 1,842评论 9 3