javascript:void(0)有什么用?3个例子让你明白!

吉云

今儿我来跟大家伙儿聊聊我在捣鼓网页时碰到的一个事儿——javascript:void(0)。这玩意儿,看着挺唬人,弄明白咋回事儿,也就那么回事儿。

我就是想弄个链接,点它能干点啥事儿,但又不想让页面跳到别的地方去。你们知道的,有时候咱就想让链接在那儿静静地待着,点它就执行点 JavaScript 代码,但页面还是老样子,哪儿都不去。然后我就去搜,发现好多人都说可以用井号 '#' 来搞,但这个,它有个毛病,就是点完后,如果页面有滚动条,它会唰地一下给你滚到最顶上,这体验可不咋地,我还得手动再滚下来,麻烦!

后来我看到有人提到javascript:void(0)这个东西,说能解决这个问题。我就琢磨,这啥玩意儿?看着还挺复杂的。我就又去查资料,这一查才知道,原来这是 JavaScript 里的一个写法。具体来说,"JavaScript:" 这部分就是告诉浏览器,“下面这段是 JavaScript 代码,你给我执行它!”;然后 "void(0)" ,void 是一个运算符,它的作用就是执行跟在它后面的表达式,但不管这个表达式是都返回一个 undefinedvoid(0),简单来说就是执行一个啥也不干的操作,返回 undefined

javascript:void(0)有什么用?3个例子让你明白!

那为啥要这么写?这是为阻止链接的默认行为。你们想想,我们平时点一个链接,浏览器是不是就会跳转到链接指定的地址?但有时候我们不想让它跳,就想让它在原地别动。这时候,javascript:void(0) 就派上用场。把它写在链接的 href 属性里,就能阻止浏览器跳转,同时还能触发我们想要的 JavaScript 代码。

我在做那个页面的时候,就把链接改成 <a href="javascript:void(0)">点我试试</a>。然后,我在后面跟上我想执行的 JavaScript 函数,比如 onclick="myFunction()"。这样,当我点这个链接的时候,它就会执行 myFunction 这个函数,但页面还是保持原样,不会跳到别的地方,也不会回到顶部,完美解决我的问题!

不过这里得注意一下,虽然这样写能解决问题,但它并不是最好的做法。为啥?因为这样写把 HTML 和 JavaScript 混在一起,不太好维护。更好的做法是把 JavaScript 代码单独写在一个文件里,然后在 HTML 里通过事件监听的方式来触发它。但这个说起来就有点多,以后有机会再跟你们细聊。

javascript:void(0) 这玩意儿,主要就是用来阻止链接的默认跳转行为,同时还能让我们执行一些 JavaScript 代码。虽然现在有更好的办法来实现类似的功能,但解一下它的原理和用法,对我们理解网页的工作方式还是很有帮助的。

以上就是我今儿想跟大家分享的关于 javascript:void(0) 的一些小知识,希望能对你们有所帮助。记住,实践出真知,多动手试试,你们也能很快掌握这些小技巧的!

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

目录[+]