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

Question

点击＆＃34;外部＆＃34;上面的 时在以下示例中，div容器可以获得焦点。

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

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

我希望contenteditable表现得更像真正的文本输入，因此只有单击span元素本身才能触发其焦点。我该怎么做呢？如何停止捕获容器元素的事件。我已经尝试过＆＃34; e.stopPropagation（）＆＃34;在父div上使用jQuery，但它没有用。

Answer 1

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