我想在单击时运行一个简单的JavaScript函数，而无需任何重定向。

将JavaScript调用放入href属性之间有什么区别或好处（例如：

<a href="javascript:my_function();window.print();">....</a>

）与将其放入onclick属性（将其绑定到onclick事件）？

将onclick放在href中会激怒那些坚信内容与行为/行为分开的人。理由是，您的html内容应仅专注于内容，而不是表示或行为。

这些天的典型路径是使用JavaScript库（例如jquery）并使用该库创建事件处理程序。它看起来像：

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

坏：

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

好：

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

更好：

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

更好的1：

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

更好的2：

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

为什么更好？因为这return false会阻止浏览器跟踪链接

最好：

使用jQuery或其他类似框架，按元素ID附加onclick处理程序。

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

就javascript而言，一个区别是处理程序中的this关键字onclick将引用其onclick属性为的DOM元素（在本例中为<a>元素），而this在href属性中则引用该元素。window对象。

就表示而言，如果href链接中没有属性（即<a onclick="[...]">），则默认情况下，浏览器将显示text光标（而不是通常需要的pointer光标），因为它正在处理<a>锚定为锚，而不是链接。

在行为方面，当通过进行导航来指定动作时href，浏览器通常会支持href使用快捷方式或上下文菜单在单独的窗口中打开该行为。仅通过指定动作时，这是不可能的onclick。

但是，如果您要询问从DOM对象单击获得动态操作的最佳方法是什么，那么最好的方法是使用与文档内容分开的javascript附加事件。您可以通过多种方式执行此操作。一种常见的方法是使用jQuery之类的JavaScript库来绑定事件：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

我用

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

很长的路要走，但是可以完成工作。使用A样式进行简化，然后变为：

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

除了此处所有内容之外，href还会显示在浏览器的状态栏中，而onclick不会显示。我认为在此处显示javascript代码不是用户友好的。

最好的方法是：

<a href="#" onclick="someFunction(e)"></a>

问题在于，这将在浏览器中的页面URL末尾添加一个哈希（＃），因此要求用户单击两次“后退”按钮才能转到您的页面前。考虑到这一点，您需要添加一些代码来停止事件传播。大多数javascript工具包都已经具有此功能。例如，dojo工具箱使用

dojo.stopEvent(event);

这样做。

最好的答案是一种非常糟糕的做法，永远不要链接到一个空的哈希，因为它会在以后产生问题。

最好是将事件处理程序绑定到元素，正如其他许多人所说的那样， <a href="javascript:doStuff();">do stuff</a>在每种现代浏览器中均能完美运行，并且在渲染模板时我广泛使用它，以避免必须为每个实例重新绑定。在某些情况下，此方法可提供更好的性能。青年汽车

另一个有趣的小贴士...

onclick＆href直接调用javascript时有不同的行为。

onclick将this正确传递上下文，而href不会，或者换句话说，<a href="javascript:doStuff(this)">no context</a>将不起作用，而<a onclick="javascript:doStuff(this)">no context</a>。

是的，我省略了href。尽管它不符合规范，但可以在所有浏览器中使用，尽管理想情况下，它应该包含一个href="javascript:void(0);"很好的措施

具有javascript:任何非专门用于脚本编写的属性是一种过时的HTML方法。从技术上讲，它是可行的，但您仍将javascript属性分配给非脚本属性，这不是一个好习惯。它甚至可能在旧的浏览器或某些现代的浏览器上失败（在Google论坛上发布的帖子似乎表明Opera不喜欢'javascript：'网址）。

更好的做法是将JavaScript放入onclick属性的第二种方法，如果没有脚本功能可用，则将其忽略。将有效的URL放置在href字段（通常为“＃”）中，以供那些没有javascript的人使用。

它使用以下代码为我工作：

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

这有效

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

就个人而言，我发现将javascript调用放在HREF标签中很烦人。我通常并不十分注意某个内容是否为javascript链接，并且常常想在新窗口中打开内容。当我尝试使用这些类型的链接之一执行此操作时，我得到的空白页上没有任何内容，而我的位置栏中显示的是javascript。但是，通过使用onlick可以稍微回避一下。

当在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可以正常工作。

首先，href最好使用url，因为它允许用户复制链接，在其他选项卡中打开等。

在某些情况下（例如，频繁更改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;
}

这种方法的好处是您可以随时随地加载新链接（例如通过AJAX），而不必担心每次绑定。

 <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>   

当页面嵌入Outlook的网页功能（将邮件文件夹设置为显示url）时，我体验到javascript：hrefs不起作用