jquery - 创建触发 javascript 并提交的 HTML 按钮的推荐方法？

Question

我正在为一个新网站创建一些核心组件，现在在按钮上。有多种创建 HTML 按钮的方法，但我正在寻找一种通用方法(如果有的话)。

一个按钮有几个关键功能

• 悬停效果
• 图片背景
• 可以在按钮上放置比文本更多的元素
• 链接到其他网页
• 提交表格
• 正文
• SEO 兼容
• 适用于 IE 9 及更高版本

我一直在使用常规链接 因为“自动”悬停，但是在使用 onclick 时将 href 设置为 # 感觉不对。

Jquery 有一些帮助功能，但我真的不喜欢将代码绑定(bind)到按钮而不在按钮元素本身上声明它。

也许带有 :hover 效果的常规 div 是最好的方式？

或者我应该为我需要的每种类型创建一个按钮吗？提交、链接、javascript？

是否有“最佳实践”？

Answer 1

正如我在评论中所说 <button>...</button>是最简单的方法:

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.
^{Source: Moz Docs}

button 元素可用于提交表单，事实上，它甚至具有用于此目的的属性:

<button type="submit">Submit</button>

The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

在大多数浏览器中，type="submit"不需要属性，单击按钮将提交表单。
其他允许的类型是:

type="reset": The button resets all the controls to their initial values.

type="button": The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

您可以在 Mozilla Docs 找到更多信息。和 W3C