我想在没有任何重定向的情况下运行一个简单的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 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 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="LinkTest" title="Any Title" href="#" onclick="Function(); return false; ">text</a>
将onclick放在href中会冒犯那些坚信内容与行为/动作分离的人。争论的焦点是你的html内容应该只关注内容,而不是表现形式或行为。
现在的典型路径是使用javascript库(例如。Jquery),并使用该库创建一个事件处理程序。它看起来像这样:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
就我个人而言,我觉得把javascript调用放在HREF标签中很烦人。我通常不太注意某些东西是不是javascript链接,而且经常想在一个新窗口中打开东西。当我尝试这样做与这些类型的链接之一,我得到一个空白页面上什么都没有和javascript在我的位置栏。但是,通过使用onlick可以避免这一点。
除此之外,href会显示在浏览器的状态栏上,而onclick则不会。我认为在那里显示javascript代码对用户不友好。