Javascript 有没有办法让 <button> 元素链接到一个位置而不用将它包装在 <a href ... 标签中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5025941/
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
Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?
提问by Dan
Just wondering if there is a way to get a HTML <button>element to link to a location without wrapping it in an <a href...tag?
只是想知道是否有办法让 HTML<button>元素链接到某个位置而不用将其包装在<a href...标签中？
Button currently looks like:
按钮目前看起来像：
<button>Visit Page Now</button>
What I would prefer notto have:
我宁愿不有：
<a href="link.html"><button>Visit Page Now</button></a>
The button is not being used within a form so <input type="button">is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a hreftag.
该按钮未在表单中使用，因此<input type="button">不是一个选项。我只是想知道是否有一种方法可以链接此特定元素而无需将其包装在<a href标签中。
Looking forward to hearing some options/opinions.
期待听到一些选择/意见。
回答by aiham
Inline Javascript:
内联 Javascript：
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
在 Javascript 中定义一个函数：
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
或在 Jquery 中
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});
回答by Pacerier
Here's a solution which will work even when JavaScript is disabled:
这是一个即使禁用 JavaScript 也能工作的解决方案：
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form>tag.
诀窍是用自己的<form>标签包围按钮。
I personally prefer the <button>tag, but you can do it with <input>as well:
我个人更喜欢<button>标签，但你也可以这样做<input>：
<form action="login.html">
<input type="submit" value="Login"/>
</form>
回答by Ken Wayne VanderLinde
Just do this
就这样做
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.hrefis outdated? Anyways, that's how I would do it.
虽然，我接触 JavaScript 已经有一段时间了——也许location.href已经过时了？无论如何，这就是我要做的。
回答by dkellner
LINKS ARE TRICKY
链接很棘手
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
考虑默认情况下 <a href> 知道但 javascript 链接不会为您做的技巧。在一个像样的网站上，任何想要充当链接的东西都应该以某种方式实现这些功能。即：
- Ctrl+Click: opens link in new tab
You can simulate this by using a window.open() with no position/size argument - Shift+Click: opens link in new window
You can simulate this by window.open() with size and/or position specified - Alt+Click: download target
People rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
- Ctrl+单击：在新选项卡中打开链接
您可以使用不带位置/大小参数的 window.open() 来模拟这一点 - Shift+单击：在新窗口中打开链接
您可以通过指定大小和/或位置的 window.open() 模拟此操作 - Alt+Click: 下载目标
人们很少使用这个，但如果你坚持模拟它，你需要在服务器端编写一个特殊的脚本来响应正确的下载头。
EASY WAY OUT
简单的办法
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it likea button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.
现在，如果你不想模仿所有的行为，我建议使用<a HREF>和风格它像一个按钮，因为按钮本身是一个大致的形状和悬停效果。我认为如果只有“按钮而没有别的”在语义上并不重要，<a href> 就是武士的方式。如果您担心语义和可读性，您还可以在文档就绪时替换按钮元素（）。这是清晰和安全的。
回答by themajiks
Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
嗯，对于一个链接，必须有一个链接标签。您还可以做的是为按钮创建一个 css 类并将该类分配给链接标签。喜欢，
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}<a href="btnlink.html" id="btn"></a>回答by tdammers
You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go'into its onclick handler. This does not work without javascript enabled though.
您可以将其设置为非提交按钮 ( <button type="button">) 并将类似的内容挂钩window.location = 'http://where.you.want/to/go'到其 onclick 处理程序中。但是，如果不启用 javascript，这将不起作用。
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
或者您可以将其设置为提交按钮，并在服务器上进行重定向，尽管这显然需要某种服务器端逻辑，但好处是不需要 javascript。
(actually, forget the second solution - if you can't use a form, the submit button is out)
（实际上，忘记第二个解决方案 - 如果您不能使用表单，则提交按钮已失效）
回答by Loni Negron
<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)
我刚刚想通了这一点，它完美地链接到另一个页面，而无需我的默认链接设置覆盖我的按钮类！:)
回答by Hussein
Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
这里使用的是 jQuery。在http://jsfiddle.net/sQnSZ/查看它的实际效果
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})
