防止点击父元素时，使contenteditable元素获得焦点

Question

在下面的示例中，当单击“外部”div容器上方的任何位置时，可编辑的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()"，但它没有起作用。

- Simon Steinberger

---

在Firefox或IE 11中不会发生，但在Chrome中会发生。似乎将内容可编辑的span的顶部和左边缘包括在击中区域内。这似乎是一个WebKit/Blink/Chrome的怪异现象。如果可能的话，建议避免在容器上放置边距。 - Tim Down

我已经找到了一个解决方案。请看我的答案：http://stackoverflow.com/a/30629511/1892693 - Hans Gustavson

Answer 1

我通过在父元素上设置pointer-events: none，并在具有可编辑内容属性的元素上设置pointer-events: all的方式来解决了这个问题。

- zigomir

---

由于在较新的Chrome版本中不存在此问题，我无法验证您的解决方案，但我相信您并接受答案 - 以防其他人遇到此问题。 - Simon Steinberger

谢谢。有趣的是，我在当前版本的Chrome上遇到了问题，并像昨天描述的那样解决了它。 - zigomir

啊，有趣。我刚刚尝试了上面的jsfiddle，在Chrome 42 / Windows 8.1上正常运行。 - Simon Steinberger

我尝试过这个，但没有成功 - 你能提供一个带有解决方案的fiddle吗？ - nuno

这对我来说没有任何作用，因为Chrome 57。 - Tomas Buteler

Answer 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>

- Lee Chase