href 与 onclick 中的 JavaScript 函数

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 元素（在本例中为<a>元素），而href属性中的this将引用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>

Answer 4

我用

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

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

Answer 6

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

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

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

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

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 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:”网址）。

更好的做法是第二种方法，将您的 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

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

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

Answer 13

我在 javascript 中使用“href”时注意到的另一件事：

如果 2 次点击之间的时间差很短，则不会执行“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

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

Answer 16

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

Answer 17

这也有效

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

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

Answer 18

最高票的答案今天已过时

我会推荐完全相反的，请逐步查看原因：

好的：

<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+ 中已过时，不应在新项目中使用。

href 中的事件

href 属性处理程序不会获取事件对象，因此处理程序不会隐式查看哪个链接是源。 您可以将它添加到 onclick 处理程序中，该处理程序在跟随 href 之前触发：

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

<script>
myModule = {};

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