Question

这是我的HTML：

<ul contenteditable>
  <li>Hi there 1</li>
  <li>HI 2 2 2 2 2</li>
  <ul><li>hi 3</li></ul> <!-- I know it's invalid, it's what document.execCommand('indent') yields -->
  <li> hi 4 hi there people 4 here now </li>
</ul>

（您可以在下周的http://www.webdevout.net/test?06&raw看到它）

我正在尝试确定当前选定的文本（在IE8中）是在一个LI内还是跨越多个LI。当我选择LI的全部一个和两个，然后在控制台document.selection.createRange().parentElement().innerHTML中输入以下内容，的内容仅为第二个LI （HI 2 2 2 2 2 2 ）被退回。

为什么TextRange.parentElement返回范围中的最终元素而不是整个范围的父元素？

The docs说＆＃34;如果文本范围跨越多个元素中的文本，则此方法返回包含所有元素的最小元素。＆＃34;我的最终目标是确定是否选择了多个LI;我想＆＃34;检查是否parentElement（）。nodeName.toUppercase ===＆＃34; LI＆＃34;＆＃34;如果parentElement（）没有返回parentElement，我就不能这样做。

Answer 1

之前我见过这种事情，这是IE中的一个错误。我在Rangy库中使用的解决方法是使用三个元素的最内部共同祖先：

TextRange的parentElement()
调用collapse（true）

parentElement()

调用collapse（false）

parentElement()

以下是Rangy的代码：

/*
 This is a workaround for a bug where IE returns the wrong container
 element from the TextRange's parentElement() method. For example,
 in the following (where pipes denote the selection boundaries):

 <ul id="ul"><li id="a">| a </li><li id="b"> b |</li></ul>

 var range = document.selection.createRange();
 alert(range.parentElement().id); // Should alert "ul" but alerts "b"

 This method returns the common ancestor node of the following:
 - the parentElement() of the textRange
 - the parentElement() of the textRange after calling collapse(true)
 - the parentElement() of the textRange after calling collapse(false)
 */
var getTextRangeContainerElement = function(textRange) {
    var parentEl = textRange.parentElement();

    var range = textRange.duplicate();
    range.collapse(true);
    var startEl = range.parentElement();

    range = textRange.duplicate();
    range.collapse(false);
    var endEl = range.parentElement();

    var startEndContainer = (startEl == endEl) ?
        startEl : dom.getCommonAncestor(startEl, endEl);

    return startEndContainer == parentEl ?
        startEndContainer : dom.getCommonAncestor(parentEl, startEndContainer);
};

为什么TextRange.parentElement返回我范围内的FINAL元素的父元素？

1 个答案: