博客

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();
    }
}