锚点或按钮

Question

我应该为 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> 元素，但这不是应该使用的吗？

原文由 Fred 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这是一个经验法则：

• 对于导航，只需使用 锚点，将其设置为按钮并让它使用它的 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 -but-but使用锚点，您不会获得使用按钮获得的点击弹出动画。

功能性

但由于锚点 <a> 需要 <a href="some/path"> 才能工作 ，即使它只是 # e.preventDefault() 单击之后必须使用锚点，除非你需要导航，除非你需要导航 --- 在你的javascript中阻止它。

原文由 ArchNoob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

确定哪个元素对于基于 JS 的用户交互具有最佳语义的最佳方法是询问如果 JS 失败（ 它将.

认为 渐进增强。想想 不引人注目的 JavaScript 。

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

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

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

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议