IE 10 选择链接不会返回正确的父级答案

【问题标题】：IE 10 Selecting a link does not return correct parentIE 10 选择链接不会返回正确的父级
【发布时间】：2015-04-28 03:49:03
【问题描述】：

我有一个函数，当使用鼠标选择文本时返回选择的父元素。

Javascript

$("#p1").on('mouseup',function(evt){
 var selectedParentElement = null,range = window.getSelection().getRangeAt(0);
  if (rangeSelectsSingleNode(range)) {
        selectedParentElement = range.startContainer.childNodes[range.startOffset];
  } else if (range.startContainer.nodeType === 3) {
       selectedParentElement = range.startContainer.parentNode;
  } else {
     selectedParentElement = range.startContainer;
  }
  console.log(selectedParentElement);
})

function rangeSelectsSingleNode(range) {
    var startNode = range.startContainer;
    return startNode === range.endContainer &&
           startNode.hasChildNodes() &&
          range.endOffset === range.startOffset + 1;
}

在 chrome 和 firefox 中，当我选择 contenteditable 段落内的链接时，该函数返回正确的父节点，即 <a>，但在 IE 10 中，它返回父元素为“段落”

见JSFiddle

【问题讨论】：

@madalinivascu jQuery parent 返回直接父元素，它与范围无关

标签： javascript jquery contenteditable

【解决方案1】：

如果您检查所选范围，原因很容易找到：当您在 IE 中选择链接文本时，结束边界在链接中文本节点的末尾，正如您所料，而开始边界是在链接之前的文本节点的末尾，这不是您所期望的。这很常见：浏览器对于文档中哪些位置对选择边界有效有不同的想法。

对这种情况的简单修复（但不是更一般的情况，更复杂的 HTML）是检查范围开始边界是否在文本节点的末尾，并将其移动到下一个元素内的文本节点的开头：

function adjustRangeStart(range) {
    var node = range.startContainer;
    var offset = range.startOffset;
    var nextNode, nextNodeChild;

    if (   node.nodeType == 3 &&
           offset == node.length &&
           (nextNode = node.nextSibling) &&
           nextNode.nodeType == 1 &&
           (nextNodeChild = nextNode.firstChild) &&
           nextNodeChild.nodeType == 3) {

        range.setStart(nextNodeChild, 0);
    }
}

演示：http://jsfiddle.net/THPmr/248/

【讨论】：