11

我应该为 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>带有 a 的锚点，href="#"但感觉不是很语义化，感觉锚点是用于指向资源的超链接，而不是用于执行某些操作的操作。然后你必须用event.preventDefault（即return false）破解它。

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

4

4 回答 4

6

决定哪个元素对基于 JS 的用户交互具有最佳语义的最好方法是询问如果 JS 失败（它会发生什么）你想要发生什么。

认为渐进增强。想想不显眼的 JavaScript。

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

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

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

于 2017-10-16T11:45:32.520 回答
5

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>

造型

它们看起来几乎一样（几乎没有理由），唯一的问题是您必须撤消buttonlike border&附带的一些样式，background但是使用锚点时，您将无法获得通过按钮获得的点击弹出动画。

功能性

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

于 2017-10-16T11:29:34.557 回答
-2

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

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

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

于 2013-08-19T12:54:24.677 回答
-4

这更像是一种偏好。

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

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

于 2013-08-19T12:45:41.277 回答