典型绑定方法

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 而言，一个区别是this处理程序中的onclick关键字将引用其onclick属性所在的DOM元素（在这种情况下为<a>元素），而this属性中的href将引用window对象。

就演示文稿而言，如果链接中缺少href属性（即<a onclick="[...]">），则默认情况下，浏览器会显示text cursor（而不是常用的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="#" onclick="someFunction(e)"></a>

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

dojo.stopEvent(event);

这样做。

Answer 7

使用这行代码对我有用：

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

Answer 8

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

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

Answer 9

这有效

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

Answer 10

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

Answer 11

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

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

另一个有趣的tid-bit ....

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

onclick会正确传递this个背景信息，而href赢了，或换句话说<a href="javascript:doStuff(this)">no context</a>无法工作，而{{1}将来。

是的，我省略了<a onclick="javascript:doStuff(this)">no context</a>。虽然这不符合规范，但它适用于所有浏览器，但理想情况下，它应该包含href以获得良好的衡量标准

Answer 12

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

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

当页面嵌入Outlook的网页功能（将邮件文件夹设置为显示url）时，我发现javascript：hrefs无法正常工作

Answer 15

首先，最好在"aaa","bbb","ccc" zzz,yyy,xxx中使用url，因为它允许用户复制链接，在其他选项卡中打开等等。

在某些情况下（例如，频繁更改HTML的网站），每次更新时都绑定链接是不现实的。

典型绑定方法

普通链接：

href

对于JS来说是这样的

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

此方法的好处是将标记和行为完全分开，而不必在每个链接中重复执行函数调用。

无绑定方法

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

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

这对于JS：

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

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

Answer 16

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

href与onclick中的JavaScript函数

16 个答案:

典型绑定方法

无绑定方法