Firefox中的选择和模糊事件答案

【问题标题】：selection and blur event in firefoxFirefox中的选择和模糊事件
【发布时间】：2018-06-10 10:35:30
【问题描述】：

我为我糟糕的英语道歉。我制作了一个简单的所见即所得文本编辑器，但在 Firefox 浏览器中遇到了问题。如果焦点从 contenteditable 块中丢失，该函数将保存选择，以便稍后通过 execCommand 将操作应用于它。在 IE11、EDGE、Chrome 中一切正常，选择已保存，您可以稍后恢复。在 Firefox 中，如果您通过单击另一个项目而失去焦点，则会保留该元素的选择，而不是与模糊事件关联的元素。也就是说，该事件会延迟触发，并将对已单击元素中的范围的引用写入 Selection 对象。只有当通过点击失去焦点时才会出现这样的错误，通过点击TAB，一切正常。

下面是这个错误的一个小例子。同样，问题出现在 Firefox 中。

function sel() {
     var selection;
     if (document.getSelection !== undefined) {
         selection = document.getSelection();
         if (selection.getRangeAt && selection.rangeCount) {
             console.log(selection.getRangeAt(0));
          }
      } else if (document.selection && document.selection.createRange) {
          console.log(document.selection.createRange());
      }
    };

    document.getElementById("c").addEventListener("blur", sel, { capture: true });

<div id="c" contenteditable="true" style="width: 300px; height: 300px; border : 1px solid black;">ccccc</div>
<div id="b" style="width: 300px; height: 300px; background-color: green;">bbbbb</div>

等待您的建议，谢谢。

【问题讨论】：

标签： firefox selection contenteditable blur

【解决方案1】：

火狐很失望

            function bindBeforeBlur(dom, callback){
                dom.addEventListener('focus', function(){
                    document.addEventListener('mousedown', callback, {
                        once: true
                    })
                })
                dom.addEventListener('mousedown', function(e){
                    e.stopPropagation();
                })
                dom.addEventListener('keydown', function(e){
                    if(e.key === 'Tab'){
                        e.preventDefault();
                    }
                })
            }

            var editable = document.getElementById('editable');
            
            var lastRange;
            bindBeforeBlur(editable, function(e){
                lastRange = window.getSelection().getRangeAt(0);
            })

            editable.focus();

            document.getElementById('insert')
            .addEventListener('click', function(){
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(lastRange);
                document.execCommand('insertHTML', false, Date.now() + ' ');
            })

        <button id="insert">insert</button>
        <div id="editable" contenteditable="true" 
        style="height: 400px;width: 400px;background: #eee"></div>

【讨论】：

感谢您的回答。好决定。我用 Mouseleave 替换了 Blur 事件，并检查了存储选择范围的变量是否为空。