单击父级时防止contenteditable元素获得焦点

Question

在以下示例中单击"Outside"div容器上方的任何位置时,contentedable 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()",但它没有用.

Answer 1

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