HTML 中的按钮与可点击 Div答案

【问题标题】：Button vs. Clickable Div in HTMLHTML 中的按钮与可点击 Div
【发布时间】：2015-09-15 20:42:45
【问题描述】：

在 HTML 中使用按钮还是可点击的 div 更好？
无论哪种方式，我都将使用 jQuery 来处理单击事件，但我想知道使用其中一个是否有优点/缺点。比如执行速度、加载速度等。

<button id="temp">Click</button>

对比

<div id="temp">Click</div>

我用来处理点击事件的代码如下所示，

$("#temp").click(function(){
//Event details here
};

我知道按钮元素已经预先设置样式看起来像一个按钮，并且（在 Windows 上）如果您在选择按钮后（通过单击）按下回车键，按钮将重新激活，就好像它是再次点击，但这两个因素对我来说都不是很重要。

【问题讨论】：

这很宽泛，对于您使用按钮的按钮，但有时您有一个 div 容器，其中包含一些需要单击事件来显示弹出窗口或类似内容的内容和图像。你必须在它的上下文中看到它才能使用它。
您需要将浏览器中可能的内容与语义正确的内容区分开来。如果您需要按钮，请使用按钮。 div 没有任何语义价值，它只是一个容器。
取决于你是否想在语义上正确。我会说虽然使用要被点击的元素可能是最好的方法。

【解决方案1】：

<button> 有一些您可能喜欢的内置内容，但也有一些不适用于<div> 的样式限制。

<button> 可以聚焦，其中<div> 必须具有tabindex 属性才能使聚焦起作用。如果配置为 ex，按下它可以提交表单。已内置onclick处理程序：<button onclick="submit()">

<button> 的使用适用于 HTML5 文档规范，该规范将 div 放置在容器中，从而提升上下文元素（如 <footer>、<section> 和 <button>）的作用。

简而言之，我总是使用<div>s，因为我可以根据需要设置它的样式并按我喜欢的方式对其进行编程，我并不喜欢预定义的行为，因为它们在不同的浏览器上会有所不同:)

【讨论】：

【解决方案2】：

不要使用<div> 标签来制作可点击的元素。使用 <a> 或 <button> 元素。这使得禁用 JavaScript 的浏览器能够按预期与它们交互。即使您的功能需要 JavaScript 并且没有合理的默认行为可以分配给 <a>，但无论如何都要使用它 - 它传达了“可点击”语义。

一般来说，选择最能描述其内容功能的标签，而不是其内容的外观，并避免不必要的<div>标签，以免你的文档受到divitis。

【讨论】：