新增input元素设置焦点后blur事件立即触发的问题排查与解决

问题背景 #

五年前曾有同类问题提出但未得到有效解决，当前遇到的场景是：基于HTMLElement自定义的类模拟C# DataGridView功能，点击可编辑单元格时调用#cellHandlers.beginEdit方法——动态创建input元素并插入表格单元格（td），绑定事件并为input设置焦点后，blur事件会立即触发，进而调用endEdit直接终止编辑状态。

问题原因 #

1. 移动端浏览器焦点管理特性：动态修改DOM结构（移除原outerDiv、插入新input）时，移动端浏览器的焦点调度逻辑可能出现混乱。原点击事件的焦点还未完全转移到新插入的input，就触发了blur事件。
2. 焦点操作冲突：代码中先调用this.#cellHandlers.td.focus()让td获取焦点，随后再给input聚焦，这种焦点切换在移动端浏览器中容易触发不必要的blur。
3. 事件绑定与DOM渲染不同步：若在input未完全完成DOM渲染和布局时就绑定blur事件，浏览器的焦点重置机制可能误触发该事件。

解决方案 #

1. 优化焦点操作与DOM操作顺序 #

移除不必要的td.focus()调用，确保input插入DOM后直接聚焦，避免焦点切换带来的冲突：

beginEdit: (td, cell) => {
    this.#cellHandlers.lvCell = cell;
    this.#cellHandlers.td = td;
    this.#cellHandlers.outerDiv = td.firstChild;
    this.#cellHandlers.span = td.querySelector('span');
    if (this.#cellHandlers.input == null) {
        this.#cellHandlers.input = document.createElement('input');
        this.#cellHandlers.input.type = 'text';
    }

    this.#cellHandlers.outerDiv.remove();
    this.#cellHandlers.td.appendChild(this.#cellHandlers.input);
    
    // 先绑定事件，再聚焦和选中文本
    this.#cellHandlers.hookEvents(true);
    this.#cellHandlers.input.focus();
    this.#cellHandlers.input.select();
},

2. 增加Blur事件的有效性判断 #

在_blur处理函数中增加判断，确认input确实失去焦点后再执行endEdit，避免误触发：

_blur: e => {
    // 延迟到下一次浏览器重绘后检查焦点，排除DOM操作导致的瞬时blur
    requestAnimationFrame(() => {
        if (document.activeElement !== this.#cellHandlers.input) {
            this.#cellHandlers.endEdit(e);
        }
    });
},

3. 替代setTimeout的更可靠方案 #

如果必须等待DOM渲染完成，用requestAnimationFrame替代setTimeout，它能确保在浏览器下一次重绘后执行代码，比固定时间的定时器更可靠：

beginEdit: (td, cell) => {
    // ... 其他代码不变 ...
    this.#cellHandlers.td.appendChild(this.#cellHandlers.input);
    
    requestAnimationFrame(() => {
        this.#cellHandlers.hookEvents(true);
        this.#cellHandlers.input.focus();
        this.#cellHandlers.input.select();
    });
},

4. 修复事件绑定逻辑的潜在问题 #

明确指定要绑定的事件，避免遍历所有属性可能带来的误操作：

hookEvents: a => {
    const events = ['blur', 'input', 'keydown'];
    events.forEach(eventName => {
        const handler = this.#cellHandlers[`_${eventName}`];
        if (a) {
            this.#cellHandlers.input.addEventListener(eventName, handler);
        } else {
            this.#cellHandlers.input.removeEventListener(eventName, handler);
        }
    });
},

总结 #

核心思路是让DOM操作、事件绑定、焦点设置的顺序符合浏览器的渲染和焦点调度逻辑，同时通过有效性判断过滤掉移动端浏览器的误触发事件，避免不必要的编辑终止。

内容的提问来源于stack exchange，提问作者Abet Giron