JavaScript - href vs onclick 用于超链接上的回调函数

Question

我想在没有任何重定向的情况下单击运行一个简单的 JavaScript 函数。

将 JavaScript 调用放在 href 属性中是否有任何区别或好处（像这样）：

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

对比将其放入onclick 属性中（将其绑定到onclick 事件）？

Answer 1

不好：

<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; });

Answer 2

将 onclick 放在 href 中会冒犯那些坚信内容与行为/动作分离的人。论点是您的 html 内容应该只关注内容，而不是展示或行为。

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

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

Answer 3

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

就表示而言，如果链接中没有href 属性（即<a onclick="[...]">），那么默认情况下，浏览器将显示text 光标（而不是经常-desired 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>

Answer 4

编辑警告：请参阅 cmets，此答案中“nohref”的使用不正确。

我用

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>

Answer 5

最佳答案是一种非常糟糕的做法，永远不应该链接到空哈希，因为它可能会在未来产生问题。

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

另一个有趣的花絮....

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);" 以进行良好的衡量

Answer 6

除了这里的所有，href 显示在浏览器的状态栏上，而 onclick 不显示。我认为在那里显示 javascript 代码对用户不友好。

Answer 7

最好的方法是：

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

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

dojo.stopEvent(event);

这样做。

Answer 8

这行得通

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

Answer 9

在任何不是专门用于脚本编写的属性中包含javascript: 是一种过时的 HTML 方法。虽然从技术上讲它有效，但您仍在将 javascript 属性分配给非脚本属性，这不是一个好习惯。它甚至可能在旧浏览器甚至一些现代浏览器上失败（谷歌论坛帖子似乎表明 Opera 不喜欢 'javascript:' url）。

第二种方法是更好的做法，将您的 javascript 放入 onclick 属性中，如果没有可用的脚本功能，该属性将被忽略。在 href 字段（通常为“#”）中放置一个有效的 URL，以供没有 javascript 的用户使用。

Answer 10

使用这行代码对我有用：

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

Answer 11

就我个人而言，我发现将 javascript 调用放在 HREF 标记中很烦人。我通常不会真正关注某个东西是否是 javascript 链接，并且经常想在新窗口中打开东西。当我尝试使用其中一种类型的链接执行此操作时，我得到一个空白页面，上面没有任何内容，并且我的位置栏中有 javascript。但是，使用 onlick 可以避免这一点。

Answer 12

首先，最好使用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;
}

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

Answer 13

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

Answer 14

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

Answer 15

最受欢迎的答案今天已过时

我会建议完全相反，请逐步查看原因：

好：

<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; });

jQuery 在 2020+ 和 should not be used in new projects 已过时。

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>

Answer 16

当页面嵌入 Outlook 的网页功能时，javascript: hrefs 不起作用，其中邮件文件夹设置为显示 url

Answer 17

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

Answer 18

这个也可以

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

（onclick）在带有引导程序的 Angular 项目中对我不起作用。