href=javascript的用法
<p> </p><div id="top_nav" class="navbar forpc">
<ul id="nav_left" class="navbar-list navbar-left">
<li class="navbar-branding"></li>
</ul>
</div>
<div id="rightmenu">
<div id="blog-sidecolumn">
<div id="sidebar_topdiggedposts" class="sidebar-block">
<div id="topdigg_posts_wrap">
<div class="catListView">
<h3 class="catListTitle">推荐排行榜</h3>
<div id="TopDiggPostsBlock">
<ul>
<li>1. 详解a标签中href="javascript:"的几种用法(4)</li>
</ul>
</div>
</div>
</div>
</div>
<div id="sidebar_recentcomments" class="sidebar-block"> </div>
</div>
</div>
<div id="main">
<div id="post_detail">
<div class="post">
<h2>详解a标签中href="javascript:"的几种用法</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="jb51code">
<div id="highlighter_463969" class="syntaxhighlighterjs">
<div class="table-wrapper">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js plain"><a href=</code><code class="js string">"javascript:void(0);"</code> <code class="js plain">onclick=</code><code class="js string">"js_method()"</code><code class="js plain">></a> </code></div>
<div class="line number2 index1 alt1"><code class="js plain"><a href=</code><code class="js string">"javascript:;"</code> <code class="js plain">onclick=</code><code class="js string">"js_method()"</code><code class="js plain">></a> </code></div>
<div class="line number3 index2 alt2"><code class="js plain"><a href=</code><code class="js string">"#"</code> <code class="js plain">onclick=</code><code class="js string">"js_method();return false;"</code><code class="js plain">></a></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p><strong>二、href="#"的作用</strong></p>
<p> a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。</p>
<p><code><span style="font-size:14px;"><a href="#">回到最顶端</a></span> </code></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="jb51code">
<div id="highlighter_406370" class="syntaxhighlighterjs">
<div class="table-wrapper">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="js plain"><a href=</code><code class="js string">"http://baidu.com"</code><code class="js plain">>超链接</a> </code></div>
<div class="line number2 index1 alt1"><code class="js plain"><a href=</code><code class="js string">"#"</code><code class="js plain">>回到最顶端</a> </code></div>
<div class="line number3 index2 alt2"><code class="js plain"><a href=</code><code class="js string">"css/css1.css"</code><code class="js plain">>文件链接</a></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">分类: 前端 JavaScript</div>
<div id="blog_post_info">
<div id="green_channel">好文要顶 关注我 收藏该文 <img src="https://common.cnblogs.com/images/icon_weibo_24.png"> <img src="https://common.cnblogs.com/images/wechat.png"></div>
<div id="author_profile">
<div id="author_profile_info" class="author_profile_info"><img src="https://pic.cnblogs.com/face/1774121/20190820180231.png">
<div id="author_profile_detail" class="author_profile_info">hello_HON<br>关注 - 3<br>粉丝 - 1</div>
</div>
<div class="clear"> </div>
<div id="author_profile_honor"> </div>
<div id="author_profile_follow">+加关注</div>
</div>
<div id="div_digg">
<div class="diggit"><span id="digg_count" class="diggnum">4</span></div>
<div class="buryit"><span id="bury_count" class="burynum">0</span></div>
<div class="clear"> </div>
<div id="digg_tips" class="diggword"> </div>
</div>
</div>
<div class="clear"> </div>
<div id="post_next_prev">« 上一篇： mysqli::query() 和 mysqli->query() 和 mysqli_query()<br>» 下一篇： MySQL存储引擎(表类型)的选择</div>
</div>
<p class="postfoot">posted on <span id="post-date">2020-04-12 23:22 hello_HON 阅读(<span id="post_view_count">14123) 评论(<span id="post_comment_count">0) 编辑 收藏 举报</span></span></span></p>
</div>
<div id="comment_form" class="commentform">
<div id="divCommentShow"> </div>
<div id="comment_nav"><span id="span_refresh_tips">刷新评论刷新页面返回顶部</span></div>
<div id="comment_form_container">
<div class="login_tips">登录后才能查看或发表评论，立即 登录 或者 逛逛 博客园首页</div>
</div>
<div id="ad_text_under_commentbox" class="ad_text_commentbox"> </div>
<div id="cnblogs_ch">【推荐】博客园x阿里云联合征文活动：我修复的印象最深的一个bug<br>【推荐】并行超算云面向博客园粉丝推出“免费算力限时申领”特别活动<br>【推荐】跨平台组态\工控\仿真\CAD 50万行C++源码全开放免费下载！<br>【推荐】HMS Core线上Codelabs挑战赛第3期：用3D建模构建元宇宙</div>
<div id="opt_under_post"> </div>
<div id="cnblogs_c1" class="under-post-card"><img alt="" data-src="https://img2020.cnblogs.com/blog/35695/202110/35695-20211008160624813-1694591598.jpg"></div>
<div id="under_post_card1">
<div class="under-post-card"><strong>编辑推荐：</strong><br>· 理解ASP.NET Core - 文件服务器(File Server)<br>· 一次 fork 引发的惨案！<br>· OAuth 2.0 的探险之旅<br>· .NET 生态系统的蜕变之 .NET 6<br>· 从顶层设计聊公司治理</div>
</div>
<div id="under_post_card2">
<div class="itnews under-post-card"><strong>最新新闻</strong>：<br>· 微软和Vodafone达成5年战略合作 为欧洲中小企业提供各种云服务（2021-11-05 14:07）<br>· NASA“好奇”号在火星上探测到新有机分子（2021-11-05 14:00）<br>· Google Drive新增Search Chips功能：优化文件搜索和过滤（2021-11-05 13:53）<br>· 水母再次攻击核电站 究竟有多危险？（2021-11-05 13:45）<br>· 物理学家发现并利用DNA分子自我组装机制打造“智能材料”（2021-11-05 13:35）<br>» 更多新闻...</div>
</div>
<div id="HistoryToday" class="under-post-card"> </div>
</div>
</div>
</div>
<p id="footer">Powered by:<br>博客园<br>Copyright © 2021 hello_HON<br><span id="poweredby">Powered by .NET 6 on Kubernetes</span></p><br><br>
来源：https://www.cnblogs.com/chenbo2853/p/15513688.html
頁:
[1]