href与onclick中的JavaScript函数

JavaScript

長ぐつをはいたネコ

2020-03-13

我想在单击时运行一个简单的JavaScript函数,而无需任何重定向。

将JavaScript调用放入href属性之间有什么区别或好处(如下所示:

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

)与将其放入onclick属性(将其绑定到onclick事件)?

第1436篇《href与onclick中的JavaScript函数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
Green留姬 2020.03.13

当页面嵌入Outlook的网页功能(将邮件文件夹设置为显示url)时,我遇到了javascript:hrefs不起作用的情况

ItachiTom 2020.03.13

首先,href最好使用url,因为它允许用户复制链接,在其他选项卡中打开等。

在某些情况下(例如,频繁更改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),而不必担心每次绑定。

飞云卡卡西神乐 2020.03.13

在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次,并且只能执行1个功能。

Firefox可以正常工作。

null 2020.03.13

就个人而言,我发现将javascript调用放在HREF标签中很烦人。我通常并不十分注意某个内容是否为javascript链接,并且常常想在新窗口中打开内容。当我尝试使用这些类型的链接之一执行此操作时,我得到的空白页上没有任何内容,并且我的位置栏中也没有javascript。但是,通过使用onlick可以略过这一点。

达蒙阿飞斯丁 2020.03.13

这有效

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>
老丝Tom前端 2020.03.13

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

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

另一个有趣的小贴士...

onclickhref直接调用javascript时有不同的行为。

onclickthis正确传递上下文,而href不会,或者换句话说,<a href="javascript:doStuff(this)">no context</a>将不会<a onclick="javascript:doStuff(this)">no context</a>

是的,我省略了href虽然不遵循规范,它会在所有的浏览器,但是,理想的应该包括href="javascript:void(0);"良好的措施

JinJin小卤蛋JinJin 2020.03.13

它使用以下代码对我有用:

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

最好的方法是:

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

问题在于,这将在浏览器中的页面URL末尾添加一个哈希(#),因此要求用户单击两次“后退”按钮才能转到您的页面前。考虑到这一点,您需要添加一些代码来停止事件传播。大多数javascript工具包都已经具有此功能。例如,dojo工具箱使用

dojo.stopEvent(event);

这样做。

阿飞路易 2020.03.13

除了此处的所有内容之外,href还会显示在浏览器的状态栏中,而onclick不会显示。我认为在此处显示javascript代码不是用户友好的。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android