javascriptvoid(0)含义以及与"#"的区别讲解


Posted in Javascript onJanuary 19, 2019

javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是无返回值。

说明:

  • 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>  

推荐写法:javascript:;

为什么要使用href=”javascript:void(0);”

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

javascript:是伪协议,表示url的内容通过javascript执行。

void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作,

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

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

href=”#"的区别(谷歌浏览器)

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

javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >点击</a> 点击后会回到网面顶部,并会在地址栏的后面加个 #

javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解

"#"其实是包含了位置信息,例如默认的锚点是#top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

使用javascript的方法(下面的这些用法会报错)

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="javascript:方法;return false;">文字</a>

补充 :<a href="javascript:fn();" rel="external nofollow" 这样点击a标签就可以执行fn()函数了。

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
js实现延迟加载的几种方法详解
Jan 19 #Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 #Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 #Javascript
js的各种数据类型判断的介绍
Jan 19 #Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 #Javascript
Vuex中的State使用介绍
Jan 19 #Javascript
为什么要使用Vuex的介绍
Jan 19 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
php格式化日期实例分析
2014/11/12 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
利用Python开发实现简单的记事本
2016/11/15 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python爬取网易云音乐评论
2018/11/16 Python
解决yum对python依赖版本问题
2019/07/05 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python如何对XML 解析
2020/06/28 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
班长演讲稿范文
2014/04/24 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
车间安全生产标语
2014/06/06 职场文书
法人代表证明书格式
2014/10/01 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS