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

把JavaScript调用放在href属性中(像这样)有什么区别或好处吗?

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

与把它放在onclick属性(绑定到onclick事件)?


当前回答

投票最多的答案在今天已经过时了

我建议完全相反,循序渐进地看原因:

好:

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

这取决于,可能是好的,因为爬虫跟踪href目标,如果有任何有意义的内容产生MyFunction()(动态链接),它比在click事件中更有可能被跟踪,后者可能有多个或没有侦听器。

bad:

<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或其他类似的框架附加onclick处理程序的元素的ID。

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

jQuery在2020+已经过时,不应该在新项目中使用。

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>

其他回答

就我个人而言,我觉得把javascript调用放在HREF标签中很烦人。我通常不太注意某些东西是不是javascript链接,而且经常想在一个新窗口中打开东西。当我尝试这样做与这些类型的链接之一,我得到一个空白页面上什么都没有和javascript在我的位置栏。但是,通过使用onlick可以避免这一点。

投票最多的答案在今天已经过时了

我建议完全相反,循序渐进地看原因:

好:

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

这取决于,可能是好的,因为爬虫跟踪href目标,如果有任何有意义的内容产生MyFunction()(动态链接),它比在click事件中更有可能被跟踪,后者可能有多个或没有侦听器。

bad:

<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或其他类似的框架附加onclick处理程序的元素的ID。

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

jQuery在2020+已经过时,不应该在新项目中使用。

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>

将onclick放在href中会冒犯那些坚信内容与行为/动作分离的人。争论的焦点是你的html内容应该只关注内容,而不是表现形式或行为。

现在的典型路径是使用javascript库(例如。Jquery),并使用该库创建一个事件处理程序。它看起来像这样:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
 <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>   

缺点:

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

更好的2:

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

为什么好吗?因为返回false会阻止浏览器跟踪该链接

最好的:

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

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