javascriptvoid0怎么用?新手也能快速掌握的技巧!

吉云

今儿我来给大家伙儿唠唠这个"javascript:void(0)"。话说这玩意儿,咱写前端代码的时候,时不时就能碰上。我一开始接触它的时候,也是一头雾水,不知道它葫芦里卖的什么药。后来用着用着,才慢慢摸着点儿门道。今儿我就把自己的这点儿心得体会分享给大伙儿,希望能帮到那些跟我当初一样迷糊的朋友们。

啥是"javascript:void(0)"?

先说说这"javascript:",这玩意儿是告诉浏览器,"哥们儿,接下来我要运行一段 JavaScript 代码"。这东西平时不咋用,它一般是跟着某个协议一起出现,例如"javascript:"。它呀,实际上是个“伪协议”,就是说它不是个正儿八经的网络协议,它就是一个执行 JavaScript 代码的指令。

javascriptvoid0怎么用?新手也能快速掌握的技巧!

再来说说这"void(0)","void"在 JavaScript 里是个操作符,它后面可以跟一个表达式。这个操作符的作用就是:不管你后面跟的表达式是都给我返回一个 undefined。那"void(0)",就是执行一个"0"这个表达式,然后返回 undefined。说白,就是啥也不干,返回一个空值。

我咋用上这玩意的?

我记得我第一次用这玩意儿,是为搞一个按钮,点击后不做任何跳转。

  • 我写一个 a 标签,然后 href 属性里直接写个“#”。
  • 结果发现,点完之后页面会“噌”的一下跳到顶部,这可不行。
  • 然后我就试着把 href 属性改成“javascript:;”,这回点击没反应。
  • 在查阅一些资料后,看到人家都用“javascript:void(0);”,我也试试。还真好使,点击之后啥反应都没有,页面纹丝不动,这正是我想要的!

后来我又试试“javascript:void(1);”甚至“javascript:void('hello');”,发现效果跟“javascript:void(0);”一模一样。这时我才明白,原来 void 后面跟啥都无所谓,关键是 void 操作符让整个表达式返回 undefined,从而阻止 a 标签的默认跳转行为。

啥时候用它?

我发现这玩意儿主要用在两个地方:

  • 一个是阻止 a 标签的默认跳转。就像我刚才说的,有时候我们希望点击一个链接后啥也不发生,就用这个。
  • 另一个是在处理事件的时候,有时候我们不希望事件的默认行为发生,也可以用它来阻止。

现在前端框架这么流行,很多时候我们都不需要直接操作 a 标签的 href 属性,框架都帮我们处理好。所以这玩意儿用到的地方也越来越少。不过解一下它的原理还是挺有意思的,说不定啥时候就用上。对?

今儿就先聊到这儿。希望我这篇糙文能帮到大家,如果还有啥不明白的地方,尽管问我,我知道的一定都告诉你们!

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。

目录[+]