IE11中获取非输入元素内点击位置的文本光标定位问题

我完全懂你的痛点——非等宽字体下靠坐标算光标位置根本行不通，而MDN标注支持的caretPositionFromPoint/caretRangeFromPoint在IE11里确实有兼容性坑，实际用起来经常掉链子。下面给你几个针对IE11场景的可行方案：

方案1：用IE特有的TextRange API #

IE11对标准API的支持有瑕疵，但它的传统TextRange反而更可靠。你可以通过点击坐标创建TextRange，再计算它在目标文本节点中的偏移量：

function getCaretOffsetInTextNode(e, targetTextNode) {
    let offset = 0;
    // 仅针对IE11的处理逻辑
    if (document.body.createTextRange) {
        const clickRange = document.body.createTextRange();
        // 注意IE用clientX/clientY（视口坐标）而非pageX/pageY
        clickRange.moveToPoint(e.clientX, e.clientY);
        clickRange.expand('character');
        
        // 创建覆盖目标文本容器的范围，用于计算相对偏移
        const containerRange = document.body.createTextRange();
        containerRange.moveToElementText(targetTextNode.parentNode);
        containerRange.setEndPoint('EndToEnd', clickRange);
        
        // 算出从文本节点开头到点击位置的字符数
        const preRange = document.body.createTextRange();
        preRange.moveToElementText(targetTextNode.parentNode);
        preRange.setEndPoint('EndToStart', containerRange);
        offset = preRange.text.length;
        
        // 修正偏移值，确保在文本节点的有效范围内
        offset = Math.max(0, Math.min(offset, targetTextNode.length));
    }
    return offset;
}

使用时，你可以在点击事件里先定位到.summaryContent下的目标文本节点，调用这个方法拿到偏移量后，再传递给CodeMirror设置光标位置（比如用editor.setCursor(editor.posFromIndex(offset))，如果有换行需要额外处理行和列）。

方案2：标准API+IE降级的兼容写法 #

如果想保留标准API的逻辑，同时给IE11做降级，可以用这个混合写法：

function getClickOffset(e) {
    let textNode = null;
    let offset = 0;
    
    // 先尝试标准浏览器的方法
    if (document.caretPositionFromPoint) {
        const range = document.caretPositionFromPoint(e.pageX, e.pageY);
        textNode = range.offsetNode;
        offset = range.offset;
    } else if (document.caretRangeFromPoint) {
        const range = document.caretRangeFromPoint(e.pageX, e.pageY);
        textNode = range.startContainer;
        offset = range.startOffset;
    } else if (document.body.createTextRange) {
        // IE11专属降级逻辑
        const clickRange = document.body.createTextRange();
        clickRange.moveToPoint(e.clientX, e.clientY);
        
        // 借助选区找到点击对应的文本节点
        const selection = document.selection;
        selection.empty();
        selection.addRange(clickRange);
        const selectedRange = selection.createRange();
        
        // 遍历父节点定位到目标文本节点
        let currentNode = selectedRange.parentElement();
        while (currentNode && currentNode.childNodes.length) {
            for (let i = 0; i < currentNode.childNodes.length; i++) {
                const node = currentNode.childNodes[i];
                if (node.nodeType === Node.TEXT_NODE) {
                    const nodeRange = document.body.createTextRange();
                    nodeRange.moveToElementText(node);
                    if (nodeRange.inRange(selectedRange)) {
                        textNode = node;
                        // 计算相对偏移
                        const preRange = document.body.createTextRange();
                        preRange.moveToElementText(node);
                        preRange.setEndPoint('EndToStart', selectedRange);
                        offset = preRange.text.length;
                        break;
                    }
                }
            }
            if (textNode) break;
            currentNode = currentNode.parentElement;
        }
    }
    
    // 确保返回的是文本节点的有效偏移
    if (textNode && textNode.nodeType === Node.TEXT_NODE) {
        return { textNode, offset: Math.max(0, Math.min(offset, textNode.length)) };
    }
    return { textNode: null, offset: 0 };
}

关键注意事项 #

• IE11的moveToPoint只认视口坐标（clientX/clientY），别用pageX/pageY，否则位置会出错。
• 如果你的.summaryContent里嵌套了<span>等元素，上面的方案已经处理了多文本节点的情况，能正确定位到点击的那个文本节点。
• 测试一定要用真实的IE11环境，别用Edge的IE兼容模式，两者API行为可能有差异。

内容的提问来源于stack exchange，提问作者Smern