el-input和el-date-picker在同一个表单中出现焦点事件冲突时，通常表现为点击el-input时el-date-picker的选择面板会闪现一下

是要成为大佬的鱼
375 阅读4分钟

为什么el-input 和 el-date-picker 在同一个表单中的会有焦点冲突问题

el-input 和 el-date-picker 焦点冲突问题解析

这个问题的根源在于 Element UI/Element Plus 组件的内部实现机制和浏览器的事件处理方式。以下是详细的技术分析：

主要原因

1. 组件结构设计特性

el-date-picker 实际上是由 el-input 和日期选择面板组合而成的复合组件。当你点击 el-date-picker 时：

  • 首先触发的是内部 input 的点击事件
  • 然后才会触发日期选择面板的展开

2. 事件冒泡机制

当页面中存在多个可聚焦元素时：

  • 浏览器会按照事件冒泡顺序处理点击事件
  • el-input 和 el-date-picker 内部的 input 会"竞争"焦点
  • 快速切换焦点可能导致视觉上的"闪烁"效果

3. 弹出层管理策略

Element 的日期选择器默认使用 teleport(或旧版的 append-to-body)：

  • 选择面板会被渲染到 body 末尾
  • 这可能导致 z-index 层级管理复杂化
  • 面板显示/隐藏的过渡动画可能被误触发

4. 焦点管理逻辑

两个组件都有自己独立的焦点管理：

  • el-input 获取焦点时只需要高亮输入框
  • el-date-picker 获取焦点时需要同时高亮输入框和展开面板
  • 这种差异可能导致冲突

技术细节深入

DOM 结构分析

el-date-picker 的实际 DOM 结构类似：

<div class="el-date-editor">
  <input class="el-input__inner"> <!-- 这是实际接收点击的input -->
  <div class="el-picker-panel">...</div> <!-- 日期选择面板 -->
</div>

事件触发顺序

当点击发生时：

  1. 浏览器捕获阶段
  2. el-input 的 mousedown 事件
  3. el-date-picker 内部 input 的 mousedown 事件
  4. 冒泡阶段事件
  5. 焦点变更事件

为什么会出现闪烁？

  1. 首先 el-input 获得焦点
  2. 然后事件冒泡到 el-date-picker
  3. el-date-picker 认为需要展开面板
  4. 但输入框已经获得焦点，面板又立即关闭
  5. 这个快速的开合过程表现为"闪烁"

解决方案原理

1. 阻止事件冒泡 (.stop)

<el-input @click.native.stop>

原理：阻止事件继续向父组件传播，避免触发 el-date-picker 的事件处理器

2. 禁用 teleport

<el-date-picker :teleported="false">

原理：让选择面板保留在组件本地 DOM 树中，避免 body 层级的 z-index 冲突

3. 调整 z-index

.el-picker__panel { z-index: 2001; }

原理：确保选择面板始终显示在其他元素上方，避免被遮盖导致的异常行为

4. 分离焦点管理

通过编程方式控制焦点：

handleInputClick() {
  this.$refs.input.focus()
}

原理：手动控制焦点切换流程，避免浏览器自动焦点管理的冲突

最佳实践推荐

  1. 组合处理：

    • 阻止输入框的点击事件冒泡
    • 调整日期选择器的弹出行为

  2. 如果问题仍然存在：

    • 检查是否有全局样式影响了这两个组件
    • 确保使用的 Element UI/Element Plus 版本是最新的
    • 考虑在 mounted 钩子中手动调整 DOM 结构

理解这些底层原理后，就能更有效地解决和预防类似的组件交互冲突问题。

实际遇到的问题实践

问题

image.png 如上图所示，当点击时间选择器后，点击确定，然后再点击工号输入框会出现时间选择器闪一下的问题，排查后发现是焦点冲突，采用以上方式进行修复

解决

经排查，我们的代码没有样式遮挡问题，只有焦点事件冒泡问题，所以将给工号输入框一个 ref 标识，当点击时间选择器时，手动将工号输入框失去焦点，并且再次点击 el-input 输入框时手动 focus 到输入框本身，这样避免冲突，同时将时间选择器的弹出框挂在组件本身，避免全局样式问题导致冲突

<el-input ref="searchInput" @focus.stop="handleInputFocus"/>

<el-date-picker :teleported="false" @focus="handleDateFocus"/>

const searchInput = ref(null)
const handleInputFocus = (e) => {
  // 当输入框获取焦点时，停止事件冒泡，并指定聚焦输入框
  e.stopPropagation();
  await nextTick();
  searchInput.value.focus();
};

const handleDateFocus = () => {
  // 当日期选择器获取焦点时，确保输入框失去焦点，避免点击工号时闪时间选择框
  searchInput.value.blur();
}

以上代码优化精简后，发现直接在 e-input 组件上的 focus 事件中阻止冒泡即可：

<el-input @focus.stop />

疑问

对了，不明白为什么我在调试的时候把姓名和工号换了位置之后，本地就没法复现了，然后不知道在第几次提交之后开发环境也没法复现，后来反复尝试每次都要发到测试环境看效果，如果友友们看到我这个问题可以帮我解答下为什么同样的浏览器不同的环境效果有差异？万分感谢🙇‍

avatar
文章
阅读
粉丝