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

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

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

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


当前回答

我不敢相信13年后,所有这些答案在语义上都是错误的!一个锚元素<a>:

...使用它的href属性,创建一个超链接到网页,文件,电子邮件地址,同一页面中的位置,或任何其他URL可以地址。 每个链接中的内容应该指明链接的目的地。如果存在href属性,在聚焦于元素时按enter键将激活它。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

因此,在javascript中使用href=是一种糟糕的做法和糟糕的web语义。你应该在按钮元素上使用onclick=事件处理程序属性,如下所示:

HTML元素是一个交互式元素,由用户通过鼠标、键盘、手指、语音命令或其他辅助技术激活。一旦激活,它就会执行可编程操作,例如提交表单或打开对话框。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

事件处理程序onclick=:

所有事件处理程序属性接受一个字符串。该字符串将用于合成一个JavaScript函数,如function name(/args/) {body},其中name是属性的名称,body是属性的值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes

因为你不是导航到一个URL或链接目的地,而是触发一个Javascript函数,这样做的正确方法是使用onclick。如果你需要一个按钮上的锚标记的样式,只需使用CSS。

底线是:你能做并不意味着你就应该做。

其他回答

最好的方法是:

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

问题是这将在浏览器中添加一个散列(#)到页面URL的末尾,从而要求用户单击返回按钮两次才能进入您的页面之前的页面。考虑到这一点,您需要添加一些代码来停止事件传播。大多数javascript工具包已经有了这个函数。例如,dojo工具包使用

dojo.stopEvent(event);

这样做

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

我用了下面这行代码:

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

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

就javascript而言,一个区别是onclick处理程序中的this关键字将引用其onclick属性的DOM元素(在本例中为<a>元素),而href属性中的this将引用窗口对象。

在表示方面,如果链接中缺少href属性(例如<a onclick="[…]">),那么默认情况下,浏览器将显示文本游标(而不是通常需要的指针游标),因为它将<a>视为锚,而不是链接。

在行为方面,当通过href导航指定操作时,浏览器通常支持使用快捷方式或上下文菜单在单独的窗口中打开该href。当只通过onclick指定操作时,这是不可能的。


但是,如果您想知道从DOM对象的单击中获得动态操作的最佳方法是什么,那么使用javascript将事件与文档内容分开是最佳方法。你可以通过多种方式做到这一点。一个常见的方法是使用javascript库,如jQuery来绑定一个事件:

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