Css 单击元素时是否仅关注contenteditable？

在contenteditable中，无论您在页面上单击何处，都可以获得焦点

如何仅在单击元素本身时，而不是在元素外部，才使焦点成为焦点

请参见演示：

尝试在任何框外单击，仍会导致焦点，这就是问题所在。

使用此脚本：

它的工作原理很容易解释如下：

单击contenteditable元素外部，获取将被聚焦的contenteditable元素。
如果在下面的焦点事件中，此元素获得焦点，请将其移除

---

问题似乎出在

内联块中。不确定原因，但是如果我将
div设置为
block
并单击
主体中的任意位置，则该
div
不会获得焦点。不幸的是，我需要一些可以收缩包装元素的内容和其他收缩包装属性（显示：表格、浮点等）搞砸了当你按enter键输入新行时会发生什么我还没有一个解决方案。如果您很匆忙，请尝试中所示的解决方法（注意：这不是一个好的解决方案，如果您需要以某种方式完成，请使用）。
if (/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)) {
    document.addEventListener('DOMContentLoaded', function(){
        var fixEl = document.createElement('input');
        fixEl.style.cssText = 'width:1px;height:1px;border:none;margin:0;padding:0; position:fixed; top:0; left:0';
        fixEl.tabIndex = -1;

        var shouldNotFocus = null;

        function checkMouseEvent(e){
            if (e.target.isContentEditable) return;
            var range = document.caretRangeFromPoint(e.clientX, e.clientY);
            var wouldFocus = getContentEditableRoot(range.commonAncestorContainer);
            if (!wouldFocus || wouldFocus.contains(e.target)) return;
            shouldNotFocus = wouldFocus;
            setTimeout(function(){
                shouldNotFocus = null;
            });
            if (e.type === 'mousedown') {
                document.addEventListener('mousemove', checkMouseEvent, false);
            }
        }
        document.addEventListener('mousedown', checkMouseEvent, false);
        document.addEventListener('mouseup', function(){
                document.removeEventListener('mousemove', checkMouseEvent, false);
        }, false);

        document.addEventListener('focus', function(e){
            if (e.target !== shouldNotFocus) return;
            if (!e.target.isContentEditable) return;
            document.body.appendChild(fixEl);
            fixEl.focus();
            fixEl.setSelectionRange(0,0);
            document.body.removeChild(fixEl);
        }, true);

    });
}
function getContentEditableRoot(el) {
    if (el.nodeType === 3) el = el.parentNode;
    if (!el.isContentEditable) return false;
    while (el) {
        var next = el.parentNode;
        if (next.isContentEditable) {
            el = next;
            continue
        }
        return el;
    }
}