href与onclick中的JavaScript函数

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光标(而不是经常期望的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="javascript:doStuff();">do stuff</a>在每种现代浏览器中均能完美运行，并且在渲染模板时我会广泛使用它，以避免必须为每个实例重新绑定。在某些情况下，此方法可提供更好的性能。青年汽车

另一个有趣的小提示。

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

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

是的，我省略了href。尽管它不符合规范，但可以在所有浏览器中使用，尽管理想情况下，它应该包含一个href="javascript:void(0);"很好的措施

Answer 10

最高票数的答案今天已过时

我建议完全相反，请逐步查看原因：

好的：

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

这取决于，可能是好的，因为爬虫遵循 href 目标，并且如果MyFunction()（动态链接）产生任何有意义的内容，那么它比点击事件更有可能被遵循，点击事件可能有多个或没有侦听器。

坏的：

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

$('#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>

Answer 11

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

Answer 12

这有效

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

Answer 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），而不必担心每次都绑定。