Javascript 和锚标记，最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6791321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript and Anchor Tags, Best Practice?
提问by Weston Watson
Quick Question.
快速问题。
Should we put Javascript in the HREF or use onClick (event)?
我们应该将 Javascript 放在 HREF 中还是使用 onClick（事件）？
Are there any pros/cons to using either one. Personally I think it's easier/cleaner to simply put code in the href, and not have to return false or worry about jumping to #
使用任何一种都有什么优点/缺点。我个人认为将代码简单地放在 href 中更容易/更干净，而不必返回 false 或担心跳转到 #
Are there any known browser specific issues with each method...
每种方法是否有任何已知的浏览器特定问题...
Examples:
例子：
<a href="javascript: alert('foo!');">Click Me</a>
<a href="#" onClick="alert('foo!');return false">Click Me</a>
<a href="javascript:void(0)" onclick="alert('foo!');">Click Me</a>
采纳答案by Ondra ?i?ka
1) Rather use onclick. Be sure to have a rational fallback URL in hrefwhen JS is not allowed.
1）而是使用onclick。在href不允许使用 JS 时，请确保有一个合理的后备 URL 。
2) Rather than onclick="...", you should use event handler.
Find elements using jQuery or XPath, and then for each, call element.addEventListener().
2) 而不是onclick="..."，您应该使用事件处理程序。使用 jQuery 或 XPath 查找元素，然后为每个元素调用element.addEventListener().
element.addEventListener("click", function() { alert("bar"); }, false);
Or the old way...
还是老办法...
element.onclick = function() { alert("foo"); };
回答by JohnKlehm
Keeping the code separate from the html is cleaner IMO.
将代码与 html 分开是更干净的 IMO。
<a id="foo" href="#">Click Me</a>
Then in head or separate js file:
然后在头部或单独的 js 文件中：
document.getElementByID("foo").onclick = function() { alert("hi"); }
回答by Rocket Hazmat
I would personally not put the JavaScript code in the HTML. You should use an event listener that will get triggered when the <a>is clicked on.
我个人不会将 JavaScript 代码放在 HTML 中。您应该使用一个事件侦听器，该侦听器在<a>单击时会被触发。
<a href="#" id="linkA">Click Me</a>
And then:
接着：
document.getElementById('linkA').addEventListener('click', function(e){
e.preventDefault(); // Prevents page from scrolling to the top
alert('foo!');
});
回答by Quentin
In the onclick event (although assigned with JS rather then the attribute) with a sensible href attribute. Build on things that work
在 onclick 事件中（虽然分配了 JS 而不是属性）具有合理的 href 属性。建立在有效的东西上
回答by Barry Kaye
Generally, I would externalize JavaScript but use thehrefto call it:
通常，我会将 JavaScript 外部化，但使用href来调用它：
<a href="javascript:foo('bar!');">Click Me</a>
<a href="javascript:foo('bar!');">Click Me</a>
Although I think your quick alertexample is fine as an exception to the rule.
尽管我认为您的快速alert示例可以作为规则的例外。
However, if your using a JS library like jQuery you can of course assign events directly - see the first example in jQuery tutorial which looks at the anchor element http://docs.jquery.com/Tutorials:How_jQuery_Works
但是，如果您使用像 jQuery 这样的 JS 库，您当然可以直接分配事件 - 请参阅 jQuery 教程中的第一个示例，该示例查看锚元素http://docs.jquery.com/Tutorials:How_jQuery_Works
