这篇博客探讨了在ElementUI中遇到的按钮点击后无法自动失焦的问题。作者详细解释了当点击按钮内的文本时，常规的event.target.blur()方法无法生效，需要改为对父元素调用blur()方法。提供了具体的代码示例，展示了如何在事件处理函数中判断并正确处理这个问题。
el-button点击后不自动失焦，手动失焦
ElementUI中Button按钮的实际渲染出的DOM节点如下面的代码所示，如果我们点击button，即nodeName == "BUTTON"，则直接使用event.target.blur()；如果我们点击到button组件上的文字也就是span标签上时，即nodeName == "SPAN"，直接使用event.target.blur()不会生效，要对其父元素使用才能生效，即使用event.target.parentNode.blur()
<button class="el-button el-button--default" type="button">
<!--v-if-->
<!--v-if-->
<span>测试</span>
</button>
具体实现代码如下：
<el-button @click.prevent="handleClick($event)" type="primary">按钮</el-button>
handleClick(event) {
event.target.blur();
if(event.target.nodeName == "SPAN") {
event.target.parentNode.blur();
}
}
扫一扫
2372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
