今儿我来跟大家伙儿聊聊我在捣鼓网页时碰到的一个事儿——javascript:void(0)
。这玩意儿,看着挺唬人,弄明白咋回事儿,也就那么回事儿。
我就是想弄个链接,点它能干点啥事儿,但又不想让页面跳到别的地方去。你们知道的,有时候咱就想让链接在那儿静静地待着,点它就执行点 JavaScript 代码,但页面还是老样子,哪儿都不去。然后我就去搜,发现好多人都说可以用井号 '#' 来搞,但这个,它有个毛病,就是点完后,如果页面有滚动条,它会唰地一下给你滚到最顶上,这体验可不咋地,我还得手动再滚下来,麻烦!
后来我看到有人提到javascript:void(0)
这个东西,说能解决这个问题。我就琢磨,这啥玩意儿?看着还挺复杂的。我就又去查资料,这一查才知道,原来这是 JavaScript 里的一个写法。具体来说,"JavaScript:" 这部分就是告诉浏览器,“下面这段是 JavaScript 代码,你给我执行它!”;然后 "void(0)" ,void
是一个运算符,它的作用就是执行跟在它后面的表达式,但不管这个表达式是都返回一个 undefined
。void(0)
,简单来说就是执行一个啥也不干的操作,返回 undefined
。
那为啥要这么写?这是为阻止链接的默认行为。你们想想,我们平时点一个链接,浏览器是不是就会跳转到链接指定的地址?但有时候我们不想让它跳,就想让它在原地别动。这时候,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)
的一些小知识,希望能对你们有所帮助。记住,实践出真知,多动手试试,你们也能很快掌握这些小技巧的!