锚点或按钮 [重复]

Posted 2023-02-24

【中文标题】锚点或按钮 [重复]

【英文标题】：Anchor or button [duplicate]

【发布时间】：2013-08-21 06:18:25

【问题描述】：

我应该为 javascript 操作使用什么元素？

执行播放/暂停/停止/新建/打开/保存/打印/关闭等操作的操作。

<a id="play" href="#">Play</a>
<a href="#play">Play</a>
<button id="play" tabindex="0">Play</button>
<div id="play" role="button" tabindex="0">Play</div>

我看到很多人使用锚点<a> 和href="#"，但这感觉不是很语义化，感觉锚点用于指向资源的超链接，而不是用于执行某些操作的操作。然后你必须用event.preventDefault（即return false）破解它。

我很少看到人们使用<button> 元素，但这不是应该使用的吗？

【问题讨论】：

您对链接的怀疑是 100% 正确的。

如果button 元素的默认样式在使用图标表示动作时被认为是不受欢迎的，则可以使用 CSS 类覆盖它。 .btn-icon background: none; border: none

谁在乎别人做什么？如果按钮对您有用，而且效果很好，请使用它们！

在编程中，几乎所有事情都至少有两种方式。

【参考方案1】：

确定哪个元素对基于 JS 的用户交互具有最佳语义的最佳方法是询问如果 JS 失败时您希望发生什么 (which it will.

想想progressive enhancement。想想unobtrusive JavaScript。

用户是否应该转到另一个页面？使用链接。 href 将是 JS 失败时的回退。

用户在发送一些数据或发出 POST 请求时是否应该转到另一个页面？使用一个按钮，把它放在一个表单中。

是否不可能有任何类型的服务器后备？使用 <button type="button"> 并考虑从 JS/DOM 而不是 html 生成它。

【讨论】：

以下是对每个优点和缺点的巧妙探索：bitsofco.de/anchors-vs-buttons>。它建议使用锚点作为回退，然后用 JavaScript 中的按钮替换它们。两全其美：逐步增强和语义正确。

【参考方案2】：

TLDR;您可以在新选项卡/窗口中打开锚链接，但不能在按钮中打开。

这是一个经验法则：

对于导航，只需使用 anchor 就可以将其设置为 按钮，让它很好地使用它的href属性。

对于快速操作（播放、暂停、停止、+1 赞）只需使用 按钮 没有href 是有原因的！

考虑一下这段代码。

const [anchor] = document.getElementsByTagName('a')
const [button] = document.getElementsByTagName('button')

anchor.addEventListener('click', e => 
  console.log('anchor clicked')
  e.preventDefault()

, false)

button.addEventListener('click', e => 
  console.log('button clicked')
)

a 
  text-decoration: none;
  padding: 2px;



button 
  background: none;
  border: none;
  font-size: 16px;


.btn 
  background-color: blue;
  color: white;
  display: inline-block;
  text-align: center;

<a class="btn" href="#">
  Anchor
</a>

<hr/>

<button class="btn" type="button">
  Button
</button>

样式

它们看起来几乎相似（几乎没有理由）唯一的问题是您必须撤消 button 附带的一些样式，例如 border 和 background 但使用锚点时您不会得到点击使用按钮弹出的动画。

功能

但是由于锚点 <a> 需要 <a href="some/path"> 才能工作即使它只是 #，除非您在单击锚点后需要导航，否则您将不得不使用 e.preventDefault()你的 javascript 来防止它。

【参考方案3】：

然后你必须用 event.preventDefault 破解它

您可以将 href 设置为 javascript:void(0) 而不是 #，这将阻止执行而不必使用 event.preventDefault()

但是按钮可能更适合这种事情

【讨论】：

我听说在href 属性中使用javascript: 伪协议是不可取的。 href 属性用于超链接。

【参考方案4】：

这更像是一种偏好。

就个人而言，我更喜欢使用 标签或自己制作。

如果使用 标签对您更有意义，请使用它。如果有效，那就没有错。 =)

【讨论】：

我注意到 Gmail 使用 div 元素，而 YouTube 使用 button 元素。 Google.com 使用 a 和 div 元素。