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仿flash导航栏特效
Nov 11 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
js切换光标示例代码
2013/10/10 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
详解js中==与===的区别
2017/01/08 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python continue语句用法实例
2014/03/11 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python安装与使用redis的方法
2016/04/19 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python版百度语音识别功能
2019/07/09 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
Python如何定义有默认参数的函数
2020/08/10 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
学生安全教育材料
2014/02/14 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
Python开发简易五子棋小游戏
2022/05/02 Python