如何避免contenteditable div失焦与点击外部按钮需两次点击的问题？

嘿，这个问题我之前做富文本组件的时候踩过坑！核心问题出在浏览器的事件触发顺序和组件重渲染的时机冲突上——当你点击按钮时，浏览器会先把焦点从contenteditable div移开，触发它的onBlur；如果你的onBlur里同步更新了父组件的状态，会直接导致组件重新渲染，这时候按钮的onClick事件还没来得及执行，DOM就已经被刷新了，所以点击逻辑直接被吞掉了。

下面给你几个经过实践验证的解决方案，按推荐度排序：

1. 用setTimeout延迟onBlur的状态更新（最稳妥） #

把父组件获取innerText并更新状态的逻辑，包在一个setTimeout里，延迟0毫秒执行——这个操作会把状态更新推到当前事件队列的末尾，等浏览器处理完按钮的点击事件后再执行，完全不会冲突：

// 父组件中处理div blur的函数
const handleContentBlur = (e) => {
  setTimeout(() => {
    const latestContent = e.target.innerText;
    setFormState(prev => ({ ...prev, content: latestContent }));
  }, 0);
};

我自己做项目的时候首选这个方法，代码改动最小，几乎没有副作用。

2. 通过relatedTarget判断blur的目标元素（更精准） #

在onBlur事件里，利用e.relatedTarget属性可以知道焦点转移到了哪个元素上。如果发现是你要点击的按钮，就先跳过状态更新，等按钮点击完成后再手动同步：

// 父组件的blur处理
const handleContentBlur = (e) => {
  // 检查焦点是否转移到目标按钮上
  if (e.relatedTarget?.classList.contains('action-button')) {
    return; // 先不更新状态，等按钮点击后处理
  }
  // 其他情况正常同步内容
  const latestContent = e.target.innerText;
  setFormState(prev => ({ ...prev, content: latestContent }));
};

// 按钮的点击事件
const handleButtonClick = () => {
  // 先手动同步div的内容到父组件状态
  const contentDiv = document.getElementById('editable-content');
  setFormState(prev => ({ ...prev, content: contentDiv.innerText }));
  // 然后执行按钮原本的业务逻辑
  submitForm();
};

这个方法适合需要精准控制场景的情况，比如只有特定按钮会触发这个冲突的时候。

3. 用mousedown代替onClick（临时救急方案） #

因为mousedown事件的触发时机早于blur，所以把按钮的逻辑移到onMouseDown上，再阻止默认行为避免焦点切换：

<button 
  onMouseDown={(e) => {
    e.preventDefault(); // 阻止默认焦点切换，避免触发div的blur
    // 执行按钮逻辑
    handleButtonAction();
  }}
>
  提交
</button>

不过这个方法会导致按钮无法获得焦点，可能影响无障碍访问，所以只适合临时解决问题，不推荐作为长期方案。

内容的提问来源于stack exchange，提问作者Alessandro Jeanteur