JavaScript - 链接 (HTML a Tag)

创建时间:
2012-10-07 18:48
最近更新:
2018-09-04 17:04

首选方案 (2018-08-31)

网摘 (2012-12-16)

如需通过 <a> 触发 JavaScript,使用 onclick 优于使用 "JavaScript 伪协议"。但切记 click 处理程序必须返回 false 来屏蔽 href 的默认行为,否则单击该链接将照常跳转。

代码

<a href="JavaScriptIsRequired.html" onclick="DoSomething();return false">Go</a>

如果浏览器未启用 JavaScript,点击上述链接将跳转至 JavaScriptIsRequired.html 页面,此页面通常用于提示用户启用 JavaScript。这种方式优于 href="#"

弊端

  1. 大量此类链接指向同一页面 JavaScriptIsRequired.html,是否不利 SEO?
  2. 鼠标悬停于此类链接之上时,浏览器状态栏的显示无意义。

JavaScript 伪协议

<a href="javascript:void(document.form.submit())">submit</A>            //用超链接提交表单
<a href="javascript:" onclick="f()" class="a_1" tabindex="-1">text</a>  //AppLocal 中最常用的写法

JavaScript 伪协议 的问题

在 CM29.0.1547.57m 中,点击

<a href="javascript:alert('NotImplemented');return false;">Message</a>

并关闭弹窗之后,F12 的 Console 中显示 "Uncaught SyntaxError: Illegal return statement",译文 "未捕获的语法错误:非法返回语句"。
改为以下形式后,不再报错:

<a href="javascript:" onclick="alert('NotImplemented');return false;">Message</a>

Code Snippets - 用户自选是否跳转至首页

<a href="/" onclick="return Validate()">Homepage</a>

function Validate(){
    return confirm("Are you sure to goto homepage?");
}

Code Snippets - 空链接 / 返回链接

<a href="javascript:void(0)">***</a>
<a href="javascript:void(0)" onclick="history.back()">Go Back</a>

Code Snippets - 按钮式的超链接

<input type="button" value="提交" onclick="window.open('http://www.hao123.com/');" />               //经测试,此方法是在新页面中打开。
<input type="button" value="提交" onclick="window.location.href='http://www.hao123.com/'" />        //经测试,此方法是在原页面中打开。
<input type="button" value="提交" onclick="window.location.replace('http://www.hao123.com/');" />   //此法打开新页面后"后退"无效!
<input type="button" value="提交" onclick="document.location.href='http://www.hao123.com/'" />