首先，将url放在href中最好，因为它允许用户复制链接、在另一个选项卡中打开等操作。

在某些情况下（例如经常更改HTML的站点），每次更新时都绑定链接是不切实际的。

典型的绑定方法

普通链接：

<a href="https://www.google.com/">Google<a/>

对于JS，可以这样写：

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

使用这种方法的好处在于标记语言和行为的清晰分离，而且不需要在每个链接中重复函数调用。

无需绑定的方法

如果您不想每次都绑定，可以使用onclick并传入元素和事件，例如:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

同时，这是关于JS的内容：

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

最受赞同的答案今天已经过时了

我建议正好相反，按步骤说明原因如下：

好处：

<a id="myLink" href="javascript:MyFunction();">link text</a>

这要看情况，可能是好的，因为网络爬虫会跟随 href 的目标，如果 MyFunction() 生成了有意义的内容（动态链接），则它更可能被追踪，而点击事件可能有多个或没有监听器。

不好的：

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

#代表无意义的链接，爬虫通常只对前x个链接感兴趣，因此它可能会阻止它们后续跟随页面上的某些有意义的链接。

更糟糕的是：

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

与之前相同，加上 return false 可以阻止链接的跟踪。如果其他一些脚本想要添加另一个监听器并更新目标（比如通过代理重定向），则它们不能在不修改 onclick 的情况下实现。（好吧，这只是一个小问题，因为这样的用例相当理论化）。

最糟糕的方法：

使用 jQuery 或其他类似框架通过元素 ID 添加 onclick 处理程序。

$('#myLink').click(function(){ MyFunction(); return false; });

在2020年及以后，jQuery已经过时，不应在新项目中使用。

href中的事件

href属性处理程序不会获取事件对象，因此处理程序无法隐式地确定链接的来源。您可以在onclick处理程序中添加它，在href被跟踪之前触发：

<a href="javascript:my_function(event2)" onclick="event2=event">
  JS based link
</a>

<script>
function my_function(e) {
  console.log(e.target); // the source of the click
  if(something) location.href = ...; // dynamic link
}
</script>

个人而言，我觉得在HREF标签中放置javascript调用很烦人。通常我并不会特别注意某个链接是否是javascript链接，而且经常想要在新窗口中打开一些内容。但是当我尝试使用这种类型的链接时，我会得到一个空白页面，什么都没有，但我的地址栏中却有javascript代码。然而，通过使用onclick事件可以避免这个问题。

在使用JavaScript的“href”时，我还注意到了一件事：

如果两次点击之间的时间差很短，则“href”属性中的脚本不会被执行。

例如，请尝试运行以下示例并快速双击每个链接。 第一个链接只会执行一次。 第二个链接将执行两次。

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

在Chrome（双击）和IE11（三击）中复现。 在Chrome中，如果您点击得足够快，您可以进行10次点击，并且只有1个函数执行。

Firefox正常工作。

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

<a href="#" onclick="try{FUNCTION_YOU_WANT()}catch(e){}return false">click here</a>

我曾遇到过这样的问题：当页面嵌入 Outlook 的网页启用功能（即将邮件文件夹设置为显示 URL）时，javascript：hrefs 无法正常工作。

我无法相信+13年后，所有这些答案在语义上都是不正确的！一个锚元素<a>：

...通过其href属性，创建到网页、文件、电子邮件地址、同一页面中的位置或任何其他URL可以访问的内容。

每个锚点内的内容应指示链接的目标。如果存在href属性，则在聚焦于该元素时按Enter键将激活它。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

HTML 元素是一种交互式元素，用户可以使用鼠标、键盘、手指、语音命令或其他辅助技术来激活它。一旦激活，它就会执行可编程操作，例如提交表单或打开对话框。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

以及事件处理程序 onclick=:

所有事件处理程序属性都接受一个字符串。该字符串将用于合成JavaScript函数，例如：function name(/args/) {body}，其中name是属性的名称，body是属性的值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes

由于您不是导航到 URL 或链接目标，而是触发 Javascript 函数，因此正确的做法是使用 onclick。如果您需要在按钮上使用锚点标记的样式，只需使用 CSS。

最重要的是：仅仅因为您可以这样做，并不意味着您应该这样做。

<span onclick="my_function();window.print();" style="text-decoration:underline;cursor:pointer;">text</span>

这也可以正常工作

<a (click)='myFunc()'>Click Here </a>

在一个使用Bootstrap的Angular项目中，(onclick)对我没有起作用。