为什么有些前端一直用 div 当按钮，而不是用 button？
先表明立场，我是button党。能用button就用button，但在实际开发中还是会习惯性地div梭哈。
谈这个问题我们要说哪些是button能做的div做不了，反之亦然。
一、表单提交
首当其冲当然是表单提交那一套，当然也不是说div真的做不了，同样一个回车提交表单的需求form+button是内置的功能，而div却需要用监听键盘事件的方式来实现。
(以下代码全部使用vue3+ts示例。)
<form @submit="submit">
<input type="text">
<button type="submit">提交</button>
</form>
const submit = (e) => {
e.preventDefault()
console.log('表单提交')
}
这是form+button的方式，非常简单好理解，只不过要在提交事件中加入e.preventDefault()来防止页面刷新，也可以用vue的事件处理@submit.prevent="submit"来防止页面刷新。
div的实现方式：
<div ref="form">
<input type="text">
<div @click="submit">提交</div>
</div>
form.value.addEventListener('keydown', (event: any) => {
if (event.keyCode === 13) {
event.preventDefault();
submit(event);
}
});
既然是事件监听，也要处理页面退出时用removeEventListener注销掉事件监听，挺麻烦的。但得益于vue对键盘事件监听的封装我们可以不用使用addEventListener，也能达到想要的效果：
<div @keydown.enter.prevent="submit">
<input type="text">
<div @click="submit">提交</div>
</div>
这样看起来跟form+button的方式比也是相当节简了。
所以从这个这个例子来看我们到底要用div还是用button呢，原生来说当然是form+button的方式更好，能不重复造轮子就别造。但即使是vue我还是建议用form+button的方式，一个表单绝非只有简单的一两个输入框，可能还有单选多选，下拉菜单，开关和各种选择器，甚至还夹杂着label和标题和文本排版。
那这么一大堆代码从哪里开始算是表单呢，答案是包一个form标签就可以很好地提高代码可读性。但既然都用上form标签了为什么不用button来使用语义化带来的简便呢。
二、双击事件
在使用div做按钮的时候如果这个按钮的功能需要多点几下（例如加减数量的按钮，翻页的按钮）就会出现点着点着文字被选中的情况，非常影响观感。这是因为div里面的文字那就是文本，多点几下其实是双击事件，双击文本就是会被选中来复制。而button当然就不会出现这种情况。
要解决也很方便，在css中禁止文本选中就行了：-webkit-user-select: none;
如果考虑浏览器适配的话就得多加几条：
.btn-1 {
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
-khtml-user-select: none; /* Konqueror */
}
加上div做按钮肯定也要加cursor: pointer;来显示点击光标，这样算div做按钮需要另外加的css代码还是不少的。
三、focus
上面两种情况还算是div努努力能够解决的，而关于focus事件，div估计就有心无力了。
div没有focus事件，而button有。
那focus事件可以拿来干什么呢，当我们需要点击一个按钮后出现别的什么东西或效果时，button的focus是要比使用v-if然后一个isShow到处truefalse来的强的。
像是气泡卡片，下拉菜单，提示，抽屉等等，所以就会出现一种截然相反的情况，原来是div在充当button的功能，而此时，button却扮演起了div的角色，类似以下：
<button type="button" class="tooltip-main" ref="content">
<div
class="animate__animated tooltip"
:class="[state.animate]">
<slot name="tooltip"/>
</div>
<slot />
</button>
这是封装的一个tooltip组件，因为我们需要用button的focus来展示点击后的提示框，当光标聚焦时提示框出现，失去聚焦时提示框消失，想想如果用div该写多少truefalse才能实现，而button只需要一句display: block;就可以：
.tooltip-main:focus .tooltip {
display: block;
}
说到这里，不难发现我一直站在button的角度带着偏见地好像要把div做按钮批的体无完肤，但为什么一开始我会说在实际开发中还是会习惯性地div梭哈呢。
其实原因也和简单，当button做按钮时，势必要自定义样式，而自定义就要无脑先写上 outline: none; border: none;background: none;才能心安理得写样式。当然可以把这几行写在全局样式里，但原因也不止这个。
在上面我举的几个例子里，表单回车提交的需求根本就可有可无，先不说人们的使用习惯早已改变，现在是移动端泛滥的时代，有些页面做出来根本就没有PC端的应用场景纯粹的H5页面，还在回车提交也就只剩下自己内心是否平衡。
双击事件如果会出现选中文本确实亟需解决，但包括focus这种情况在内的，真的很少，如果遇到了再把div改成button就好了，或者也把禁止文本选中写到全局里。
最后，不管是div梭哈也好，语义化也罢，制造需求的是人，解决需求的也是人，选择哪一种不是让你走向哪一种极端。div梭哈是不是不想学习其他标签而给自己找的借口呢，而使用大量的语义化只会在复杂的标签里被限制了想象只剩下无意义的傲慢。
