Question

疯了......

我想知道用户是否选择了一个或多个元素。但是，这些元素应仅包含带有文本的实际元素。

我尝试将选择anchorNode（start）与选择focusNode（end）进行比较并查看它们是否相同。但是，这会在不同的浏览器中产生不同的结果，并且根据文本的选择方式而产生不同的结果。这需要至少在IE（＆gt; 8），FireFox和Chrome中使用。

在包含的html示例（和小提琴）中：

双击选择“三”：

Chrome:
   startNode: textNode containing "Three"
   endNode:   textNode containing "Three"

FireFox/IE:
   startNode: empty textNode (presumably between two and three)
   endNode:   textNode containing "Three"

点击并拖动选择“三个”：

Chrome:
   startNode: textNode containing "Three"
   endNode:   textNode containing "Three"

FireFox/IE:
   startNode: textNode containing "Three"
   endNode:   textNode containing "Three"

双击“两个”，然后选择它后面的空格：

Chrome:
   startNode: textNode containing "one two"
   endNode:   empty textNode

FireFox/IE:
   startNode: textNode containing "one two"
   endNode:   textNode containing "Three"

我想要的是所有上述情况都意识到它实际上只有一个节点被选中。我想规则是检查选择中的所有文本是否来自同一节点。所以我试图遍历它，并且看，下一个兄弟，孩子，以及不同浏览器的不同之处。

http://jsfiddle.net/SvNm8/

<!DOCTYPE html>
<html>

     <li>
       <span>one two</span> <span>three</span>
    </li>
    <div id = "x"></div>

</html>

<script> // to show results
document.onmouseup=function(){

    var userSelection = window.getSelection();
    var selected_element = userSelection.anchorNode;
    var last_selected_element = userSelection.focusNode;

    document.getElementById("x").innerHTML = selected_element.nodeName + " " + selected_element.nodeValue + " " + last_selected_element.nodeName + " " + last_selected_element.nodeValue ;

    };
</script>

js：用户选择是否遍历多个元素

0 个答案: