javascript - IE 10 选择链接不会返回正确的父链接

Question

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

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 中，它返回父元素为“paragraph”

参见JSFiddle

Answer 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/