HTML 按钮：导航到其他页面 - 不同的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17565401/
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
HTML Button : Navigate to Other Page - Different Approaches
提问by Raptor
There are multiple ways to create a HTML button to navigate to other page.
有多种方法可以创建 HTML 按钮以导航到其他页面。
Method 1
方法一
<button id="btn_click">Click Me</button>
<script>
$('#btn_click').on('click', function() { window.location = 'http://www.google.com'; });
</script>
- Advantage: Separate JS from HTML (MVC)
- Disadvantage: Long codes, rely on JS
- Note: jQuery selector is optional, can use traditional JavaScript
- 优点：将 JS 与 HTML (MVC) 分开
- 缺点：代码长，依赖JS
- 注意：jQuery 选择器是可选的，可以使用传统的 JavaScript
Method 2
方法二
<button onclick="window.location='http://www.google.com'">Click Me</button>
- Advantage: 1-liner, no need assign ID to button
- Disadvantage: Mix JS with HTML, rely on JS
- 优点：1-liner，无需为按钮分配ID
- 缺点：JS和HTML混合，依赖JS
Method 3
方法三
<a class="click-me" href="http://www.google.com">Click me</a>
<style>
.clickMe {
-moz-appearance: button;
-ms-appearance: button;
-o-appearance: button;
-webkit-appearance: button;
appearance: button;
text-decoration: none;
color: #000;
padding: 0.2em 0.4em;
}?
</style>
- Advantage: no need to rely on JS
- Disadvantage: Looks like a fake button, IE9+ required (
appearanceis a CSS3 property ) - Note: this is from here
- 优点：无需依赖JS
- 缺点：看起来像假按钮，需要IE9+（
appearance是CSS3属性） - 注意：这是从这里
Method 4
方法四
<form action="http://www.google.com">
<button>Click Me</button>
</form>
- Advantage: Shortest code, no need to rely on JS
- Disadvantage: Misuse of
<form>tag. Does not work if there is another submit button
- 优点：代码最短，无需依赖JS
- 缺点：滥用
<form>标签。如果有另一个提交按钮则不起作用
Programmers, which approaches is the most efficient (and hence used widely), and why?
程序员，哪种方法最有效（因此被广泛使用），为什么？
Note:can we make this as community wiki ?
注意：我们可以将其设为社区 wiki 吗？
采纳答案by GolezTrol
I make a link. A link is a link. A link navigates to another page. That is what links are for and everybody understands that. So Method 3 is the only correct method in my book.
我做个链接。一个链接就是一个链接。一个链接导航到另一个页面。这就是链接的用途，每个人都明白这一点。所以方法3是我书中唯一正确的方法。
I wouldn't want my link to look like a button at all, and when I do, I still think functionality is more important than looks.
我不希望我的链接看起来像一个按钮，当我这样做时，我仍然认为功能比外观更重要。
Buttons are less accessible, not only due to the need of Javascript, but also because tools for the visually impaired may not understand this Javascript enhanced button well.
按钮不易访问，不仅是因为需要 Javascript，还因为视障者的工具可能无法很好地理解这个 Javascript 增强按钮。
Method 4 would work as well, but it is more a trick than a real functionality. You abuse a form to post 'nothing' to this other page. It's not clean.
方法 4 也可以工作，但它更像是一种技巧而不是真正的功能。您滥用表单将“无任何内容”发布到另一个页面。它不干净。
回答by Maximilien Douchin
I use method 3 because it's the most understandable for others (whenever you see an <a>tag, you know it's a link) and when you are part of a team, you have to make simple things ;).
我使用方法 3 是因为它对其他人来说是最容易理解的（每当你看到一个<a>标签时，你就知道它是一个链接）并且当你是团队的一员时，你必须做一些简单的事情;）。
And finally I don't think it's useful and efficient to use JS simply to navigate to an other page.
最后，我认为仅使用 JS 导航到其他页面是没有用的和高效的。
