href与onclick中的JavaScript函数

我想在点击时运行一个简单的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; } );

---

就我个人而言，我觉得把javascript调用放在HREF标记中很烦人。我通常不会真正注意某个东西是否是javascript链接，而且常常希望在新窗口中打开它。当我尝试使用其中一种链接时，我会得到一个空白页面，上面什么都没有，位置栏中有javascript。但是，使用onlick有点回避了这一点。

除此之外，href显示在浏览器的状态栏上，onclick not。我认为在那里显示javascript代码对用户不友好。

在任何不专门用于脚本的属性中包含

javascript:

，这是一种过时的HTML方法。从技术上讲，它可以工作，但您仍然将javascript属性分配给非脚本属性，这不是一个好的做法。它甚至可能在旧浏览器上失败，甚至在一些现代浏览器上也会失败（谷歌论坛上的一篇帖子似乎表明Opera不喜欢“javascript:”URL）

更好的做法是第二种方法，将javascript放入

onclick

属性，如果没有可用的脚本功能，该属性将被忽略。在href字段中放置一个有效的URL（通常为“#”）以供没有javascript的人使用。

就javascript而言，一个区别是

onclick

处理程序中的

this

关键字将引用其属性为

onclick

的DOM元素（在本例中为

$（'a#link'）。单击（函数（）{/*…操作…*/}）

最好的方法是：

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

这样做。

我使用

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>

A{光标：指针；颜色：蓝色；文本装饰：下划线；}

坏：

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

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

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

---

使用这一行代码对我很有效：

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

---

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

函数myFunc（）{
var s=0；
对于（var i=0；i来说，最上面的答案是一种非常糟糕的做法，人们永远不应该链接到空哈希，因为它可能会在将来产生问题

最好的方法是将事件处理程序绑定到元素，正如许多其他人所说，
在每个现代浏览器中都能完美工作，我在呈现模板时广泛使用它，以避免为每个实例重新绑定。在某些情况下，这种方法提供了更好的性能。YMMV

另一个有趣的小贴士

onclick
&
href
在直接调用javascript时有不同的行为

onclick
将正确地传递
此
上下文，而
href
不会，或者换句话说
不会工作，而
没有上下文
会

是的，我省略了
href
。虽然这不符合规范，但它在所有浏览器中都可以工作，不过，理想情况下，它应该包含一个
href=“javascript:void（0）；”
，以便更好地衡量

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

登记
学生
老师
$（文档）.ready（函数（）{
$（'signin_student'）。工具提示（'show'）；$（'signin_student'）。工具提示（'hide'）；
});
$（文档）.ready（函数（）{
$（'signin_teacher'）。工具提示（'show'）；$（'signin_teacher'）。工具提示（'hide'）；
});
这很有效

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


我体验到，当页面嵌入Outlook的网页功能时，javascript:hrefs不起作用，在Outlook的网页功能中，邮件文件夹被设置为首先显示url
，将url放在
href
中是最好的，因为它允许用户复制链接、在其他选项卡中打开等

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

典型绑定方法
正常链接：

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

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

无绑定方法
但是，如果不希望每次都绑定，可以在元素和事件中使用onclick和pass，例如：

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

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

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

这同样有效

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

点击这里

（onclick）在有引导的角度项目中不适用。
或mootools、prototype、dojo…或javascript上的plain，但这需要更多的代码，但值得练习。如果不必对事件对象做任何操作，纯javascript非常简单。使用obj=document.getElementById（）获取DOM节点，然后设置obj.onclick=foo当在弹出窗口中动态生成时，您仍然需要一个特殊的
$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

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

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

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

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