Firefox 中的选择和模糊事件

Question

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

下面是此错误的一个小示例。同样，问题出现在火狐中。

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>

我等待你的建议，谢谢。

Answer 1

Firefox 非常失望

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>