单击父项时防止 contenteditable 元素获得焦点答案

【问题标题】：Prevent contenteditable element from getting focus when clicking parent单击父项时防止 contenteditable 元素获得焦点
【发布时间】：2014-06-21 21:00:14
【问题描述】：

在以下示例中单击“外部”div 容器上方的任意位置时，contenteditable span 元素将获得焦点。

<div style="margin:30px">
    <span contenteditable="true" style="background:#eee">
        Hello World
    </span>
    <div>Outside</div>
</div>

这是一个 jsFiddle： http://jsfiddle.net/AXM4Y/

我希望 contenteditable 的行为更像是一个真实的文本输入，因此只有单击 span 元素本身才能触发其焦点。我该怎么做呢？如何停止容器元素的事件捕获。我已经在父 div 上使用 jQuery 尝试过“e.stopPropagation()”，但没有成功。

【问题讨论】：

在 Firefox 或 IE 11 中不会发生，但在 Chrome 中会发生。它似乎包括 contenteditable 跨度的命中区域的顶部和左侧边距。看起来像一个 WebKit/Blink/Chrome 的怪事。如果可能的话，我建议避免在容器上设置边距。
我找到了解决方案。看看我的回答：stackoverflow.com/a/30629511/1892693

标签： html events focus contenteditable

【解决方案1】：

我通过将pointer-events: none 放在父元素上并将pointer-events: all 放在具有内容可编辑属性的元素上的方式修复了它。

【讨论】：

由于较新的 Chrome 版本中不存在此问题，因此我无法验证您的解决方案，但我相信您并接受答案 - 以防其他人遇到此问题。
谢谢。有趣的是，我在当前的 Chrome 上遇到了问题，并像昨天描述的那样解决了它。
啊，有趣。我刚刚从上面尝试了我的 jsfiddle，它在 Chrome 42/Windows 8.1 中运行
我试过这个但没有成功 - 你能提供一个解决方案吗？
从 Chrome 57 开始，这对我没有任何影响

【解决方案2】：

要使内容可编辑的行为类似于输入，还有很多工作要做，但在回答您的问题时，这适用于 Chrome 98 浏览器。

const myEditableContainer = document.querySelector('.my-editable__container');
const button = document.querySelector('button');
let disabled = false;
const buttonText = (disabled) => `Click to ${disabled ? 'enable' : 'disable'}`;

button.innerHTML = buttonText(disabled);
button.addEventListener('click', () => {
    disabled = !disabled;
  button.innerHTML = buttonText(disabled);
  myEditableContainer.classList.toggle('my-editable-container--disabled', disabled);
});

.my-editable__container {
  position: relative;
}
 
.my-editable__cover {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: white;
}

.my-editable-container--disabled .my-editable__cover {
  pointer-events: all;
  opacity: 0.5;
}

<div style="margin:30px">
  <div class="my-editable__container">
    <span class="my-editable" contenteditable="true" style="background:#eee">
        Hello World
    </span>
    <span class="my-editable__cover"></span>  
  </div>
    
   <button>
     Enable/Disable
   </button>
  
  <div>Outside</div>
</div>

【讨论】：