我想在没有任何重定向的情况下运行一个简单的JavaScript函数。
把JavaScript调用放在href属性中(像这样)有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
与把它放在onclick属性(绑定到onclick事件)?
我想在没有任何重定向的情况下运行一个简单的JavaScript函数。
把JavaScript调用放在href属性中(像这样)有什么区别或好处吗?
<a href="javascript:my_function();window.print();">....</a>
与把它放在onclick属性(绑定到onclick事件)?
当前回答
最好的方法是:
<a href="#" onclick="someFunction(e)"></a>
问题是这将在浏览器中添加一个散列(#)到页面URL的末尾,从而要求用户单击返回按钮两次才能进入您的页面之前的页面。考虑到这一点,您需要添加一些代码来停止事件传播。大多数javascript工具包已经有了这个函数。例如,dojo工具包使用
dojo.stopEvent(event);
这样做
其他回答
在任何不是专门用于脚本的属性中使用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);"作为良好的衡量标准
缺点:
<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; });
我用了下面这行代码:
<a id="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
我不敢相信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。
底线是:你能做并不意味着你就应该做。