初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。
使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。如图示：
图1-正常状态下的按钮
图2-鼠标悬浮或点击后的按钮
我们所期望的是，在按钮点击后，恢复到正常状态（即图1）。
因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。搜索到的解决方案基本如下：evt.target.blur()。只能说天下文章一大抄啊！！！搜到的几篇帖子，都只是使用evt.target.blur()强制失去焦点即可，然而这并没有全面解决问题。 因为如果点击按钮的空白处，点击完毕后，的确可以恢复到点击前的状态的，但是如果点击“退出”两个字，在点击完成后，按钮状态还是没有恢复到点击之前的样子。
解决方法:
clickHandler(evt) {let target = evt.target;if(target.nodeName == "SPAN"){target = evt.target.parentNode;}target.blur();}
上面是解决方法。
原因：
下图为el-button的结构：
el-button结构图
点击button的时候，如果点击到文字（即span）上，这个时候evt.target是span标签，这个时候是没法直接触发其父节点button的blur方法的，也就没法强制button失去焦点。所以需要判断点击的是span还是button。
如果觉得《elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）》对你有帮助，请点赞、收藏，并留下你的观点哦！
