div 按钮和 button 按钮

我们通常可以通过 HTML 元素结合需求的样式作为按钮触发一些事件，但原始 button 标签其实内置了许多功能，并且可以通过一些方法，一键清楚默认样式，从而定制需求样式。

首先是原始的 button 标签和 div 标签 作为按钮时的效果展示：

<button style="margin-bottom: 10px;">原始button</button>

<div style="margin-bottom: 10px;cursor: pointer;">
   div构成的button
</div>

在鼠标点击button标签按钮时，再用 键盘的 空格或是 回车键，仍然可以触发按钮点击；

但在鼠标点击div标签按钮时，再用 键盘的 空格或是 回车键，发现不可以触发按钮点击。

这是button标签的内置浏览器的功能，并且在鼠标经过div标签时，如果没有定义 'cursor: pointer;' 这个样式，鼠标的光标会显示为输入文本时的光标。

上述关于button标签的内置浏览器的功能，在使用一系列HTML元素想要实现时，需要进行以下绑定：

// HTML 部分
<div style="margin-bottom: 10px;cursor: pointer;" @click="handleOnClick()" onkeydown="handleKeyPress">
   div构成的button
</div>

// JS 部分
methods: {
    // div按钮点击事件
    handleOnClick() {
      console.log('div按钮点击触发！！')
    },
    // div按钮键盘点击触发事件
    handleKeyPress(e) {
      if(e.key === 'Enter' || e.key === 'Space') {
        console.log('键盘点击触发！！')
      }
    }
}

最后一点就是，在使用button标签时，会有默认样式及功能，可以使用 'all:unset' 一次性移除所有默认样式：

<button style="margin-bottom: 10px;all:unset">
    button通过'all:unset'取消默认样式
</button>