vue项目使用了失去焦点事件后点击弹窗的确认,确认按钮不生效

当Vue项目中某个元素设置了失去焦点事件，比如在一个表单输入框上，当你离开这个输入框并点击弹出窗口（如模态框的确认按钮）时，由于焦点转移，可能会阻止原本绑定到输入框的事件处理器（如确认按钮的点击事件）正常触发。

解决这个问题的关键在于理解事件冒泡和阻止默认行为。如果你希望在弹窗的确认按钮点击时不影响失去焦点事件的行为，可以尝试以下方法：

1. **事件委托**：将确认按钮的点击事件处理程序绑定到其父元素，然后在事件处理函数内部检查目标元素是否是你期望响应的输入框。

<!-- 父元素 -->
<div @click="handleClick($event)">
   <!-- 其他内容 -->
   <button @click.prevent>确认</button>
</div>

<script>
methods: {
    handleClick(event) {
        if (event.target.tagName === 'INPUT' || event.target.id === 'yourInputId') {
            // 处理输入框点击情况
        } else {
            // 弹窗确认逻辑
        }
    }
}
</script>

2. **取消阻止默认行为**：在处理确认按钮点击事件时，恢复默认行为，以便让失去焦点事件继续执行。

handleButtonClick(event) {
    if (event.target.tagName === 'BUTTON' && event.target.className.includes('confirm')) {
        event.preventDefault(); // 取消阻止默认行为
        // 执行确认操作
    }
}