锚点或按钮

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>元素,但它不应该被用于什么？

Answer 1

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

这是一个经验法则：

• 对于导航，只需使用锚点即可将其样式设置为按钮并让它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>

造型

它们看起来几乎很相似（几乎没有什么理由），唯一的问题是您必须撤消一些带有buttonlike border&的样式background，但使用锚点时，您不会像使用按钮那样获得点击弹出动画。

功能性

但由于锚点<a>需要<a href="some/path">工作，即使它只是#，除非您需要在单击锚点后进行导航，否则您必须e.preventDefault()在 JavaScript 中使用它来阻止它。

Answer 2

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

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

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

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

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