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

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

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

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


当前回答

在任何不是专门用于脚本的属性中使用javascript:都是一种过时的HTML方法。虽然从技术上讲它是可行的,但您仍然将javascript属性分配给非脚本属性,这不是一个好的实践。它甚至可以在旧的浏览器上失败,甚至在一些现代的浏览器上(一个谷歌论坛的帖子似乎表明Opera不喜欢'javascript:' url)。

更好的做法是第二种方式,将javascript放到onclick属性中,如果没有可用的脚本功能,则忽略该属性。在href字段中放置一个有效的URL(通常是'#'),以供那些没有javascript的人使用。

其他回答

在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次,只有一个功能执行。

Firefox运行正常。

首先,将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),而不必担心每次都要绑定。

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

在任何不是专门用于脚本的属性中使用javascript:都是一种过时的HTML方法。虽然从技术上讲它是可行的,但您仍然将javascript属性分配给非脚本属性,这不是一个好的实践。它甚至可以在旧的浏览器上失败,甚至在一些现代的浏览器上(一个谷歌论坛的帖子似乎表明Opera不喜欢'javascript:' url)。

更好的做法是第二种方式,将javascript放到onclick属性中,如果没有可用的脚本功能,则忽略该属性。在href字段中放置一个有效的URL(通常是'#'),以供那些没有javascript的人使用。

上面的答案是一个非常糟糕的做法,永远不要链接到空哈希,因为它可能会在后面产生问题。

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

另一个有趣的消息是....

Onclick和href在直接调用javascript时有不同的行为。

onclick将正确地传递这个上下文,而href不会,换句话说,<a href="javascript:doStuff(这个)">没有上下文</ >将不工作,而<a onclick="javascript:doStuff(此)">no context</a>将。

是的,我省略了href。虽然这并不符合规范,但它可以在所有浏览器中工作,尽管理想情况下,它应该包括一个href="javascript:void(0);"作为良好的衡量标准