Question

在Edge中更改文档的body元素上的CSS缩放级别时，caretRangeFromPoint返回的范围不正确。

document.getElementsByTagName("body")[0].style.zoom = 1.5;
window.onclick = function(e) {
    var caretPos = document.caretRangeFromPoint(e.clientX, e.clientY);
        var obj = document.createElement('span');
        obj.style.cssText = 'background: #0c0;display: inline-block;height: 1em;width:1em;';
    if (caretPos)
        caretPos.insertNode(obj);
};

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

JSFiddle：

https://jsfiddle.net/Aw9aV/292/

在<p>元素内单击以查看问题所在。跨度未插入到单击的位置。

更新

我已就此问题与Microsoft联系。他们仍在调查中，但初步发现表明这可能是Edge中的错误。联系人通知我，他无法在Windows的RS5更新中复制它。我现在正在等待有关如何在Webview控件中解决此问题的更多信息。

Answer 1

我的系统中没有Edge（使用Ubuntu），我认为来自MDN的这段代码可能会有所帮助

function insertBreakAtPoint(e) {

    var range;
    var textNode;
    var offset;

    if (document.caretPositionFromPoint) {
        range = document.caretPositionFromPoint(e.clientX, e.clientY);
        textNode = range.offsetNode;
        offset = range.offset;
        
    } else if (document.caretRangeFromPoint) {
        range = document.caretRangeFromPoint(e.clientX, e.clientY);
        textNode = range.startContainer;
        offset = range.startOffset;
    }

    // only split TEXT_NODEs
    if (textNode && textNode.nodeType == 3) {
        var replacement = textNode.splitText(offset);
         var br = document.createElement('span');
        br.style.cssText = 'background: #0c0;display: inline-block;height: 1em;width:1em;';
        textNode.parentNode.insertBefore(br, replacement);
    }
}

var paragraphs = document.getElementsByTagName("p");
for (i=0 ; i < paragraphs.length; i++) {
    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
}

有关更多信息，请访问here 我还创建了一个小提琴here，请检查并让我知道您的关注

CSS缩放破坏了Microsoft Edge中的caretRangeFromPoint

1 个答案: