为什么按钮点击后其:focus伪类效果没有消失?

站长

2024年07月10日 09:44 · 阅读数 10

是这样的, 看图1, 我有个el-button按钮长这么样为什么按钮点击后其:focus伪类效果没有消失?

点击按钮会弹一个框, 点击弹框里的按钮将弹框关闭以后, 这个"更换账号"得按钮变成下图2

现在测试提的bug是这个按钮的样式要保持之前的那个样(图1)

我看了下样式表, 起到作用的是

.el-button--primary:focus, .el-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #FFF;
}

擦, 为啥按钮点击完了:focus伪类还不消失?怎么整啊

1个回答

test

2024-07-10

因为按钮处在focus状态呀，这个很好理解的，就比如一个input框，通常情况下就是一个框框，但是你点击一下之后，框框里面就有一个光标在闪，这个时候input就是focus状态，你就可以在里面输入文字，点击别的地方闪闪的光标就消失，这个就是处于blur状态。

这个状态的作用最直观的就是可以与键盘进行交互，input就是一个很好的案例，按钮也有交互，就是按空格也可以触发点击事件，还有就是按tab键可以切换焦点元素。

这个是bug吗？

我在开发的过程中也遇到过测试给我提出这个bug，但是我从来都没有修复过这个bug，在我看来这并不是bug，我给到的解释就是给测试人员科普为什么会有这样的效果。

如果有的测试死脑筋，非要说这个是bug，而且还给你提bug了（就是那种会留记录的），我也一样回绝，拒绝修改这个问题。

因为你修改之后，用户可能并不知道这个按钮处于focus状态，这个时候如果用户误操作了才是真正的bug。

如果这个按钮涉及到敏感数据，那可能就是线上事故了，这个时候可不是测试的责任，而是开发的问题了，测试可以不懂事，作为开发的你难道想因为这个半夜回来加班？

适合作为回答的

不该作为回答的