详解a标签中href="javascript:"的几种用法
<h2> </h2><div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">
<p>a标签的一种写法<code><a href="JavaScript:;"></a></code>，所以就来整理下a标签中href的几种用法。</p>
<p><strong>一、js 伪协议的几种调用方法（参考总结的）</strong></p>
<p> 1、<code>a href="javascript:js_method();"</code></p>
<p> 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句</p>
<p> 2、 <code>a href="javascript:void(0);" onclick="js_method()"</code></p>
<p> 这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。</p>
<p> 3、<code>a href="javascript:;" onclick="js_method()"</code></p>
<p> 这种方法跟跟2种类似，区别只是执行了一条空的js代码。</p>
<p> 4、<code>a href="#" onclick="js_method()"</code></p>
<p> 这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。</p>
<p> 5、<code>a href="#" onclick="js_method();return false;"</code></p>
<p> 这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。</p>
<p> 6、<a href='javascript:todoFun(void)'>删除</a></p>
<p> 这种方法在点击 a 标签时，执行一个 js 另外自定义函数 todoFun(void) 。并传参 void。</p>
<p> 综合上述，在a中调用js函数最适当的方法推荐使用：</p>
<div class="cnblogs_code">
<pre><a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">javascript:void(0);</span><span style="color: rgba(128, 0, 0, 1)">"</span> onclick=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">js_method()</span><span style="color: rgba(128, 0, 0, 1)">"</span>></a>
<a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">javascript:;</span><span style="color: rgba(128, 0, 0, 1)">"</span> onclick=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">js_method()</span><span style="color: rgba(128, 0, 0, 1)">"</span>></a>
<a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">#</span><span style="color: rgba(128, 0, 0, 1)">"</span> onclick=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">js_method();return false;</span><span style="color: rgba(128, 0, 0, 1)">"</span>></a></pre>
</div>
<p><strong>二、href="#"的作用</strong></p>
<p> a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。</p>
<p><span style="background-color: rgba(255, 255, 153, 1)"><code><span style="font-size:14px;"><a href="#">回到最顶端</a></span> </code></span></p>
<p><strong>三、href="URL"的作用</strong></p>
<p> 1、URL为绝对URL</p>
<p> 此时指向另一个站点，比如href="http://write.blog.csdn.NET",那么点击时就会直接跳转到这个链接的页面。</p>
<p> 2、URL为相对URL</p>
<p> 此时指向站点内的某个文件，比如href="/test.doc"，那么点击时就会直接下载文件。</p>
<p> 3、锚 URL</p>
<p> 此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。</p>
<p>即所有的三种代码样例：</p>
<div class="cnblogs_code">
<pre><a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">http://baidu.com</span><span style="color: rgba(128, 0, 0, 1)">"</span>>超链接</a>
<a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">#</span><span style="color: rgba(128, 0, 0, 1)">"</span>>回到最顶端</a>
<a href=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">css/css1.css</span><span style="color: rgba(128, 0, 0, 1)">"</span>>文件链接</a></pre>
</div>
<p> </p>
</div>
</div>
<div id="MySignature" role="contentinfo">
人生很漫长，或许我只是你人生中微不足道的一小段，只是你人生中的惊鸿一瞥。<br><br>
来源：https://www.cnblogs.com/caijinghong/p/15662513.html
頁:
[1]