1

I wanted to use jQuery to tweak the copy-mechanism. I noticed that when the anchor and focus nodes of a selection were the same, the corresponding jQuery objects (compared using the .is method) were not.

In Chrome and Firefox (Windows) the comparison fails in this example:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(function () {
                $("#testdiv").on("copy", function(event) {
                    var sel = window.getSelection();
                    var $anchorNode = $(sel.anchorNode);
                    var $focusNode = $(sel.focusNode);
                    $("#logdiv").append("<p>The DOM nodes are" + (sel.anchorNode == sel.focusNode ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>The jQuery objects are" + ($anchorNode.is($focusNode) ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>Parent: the DOM nodes are" + (sel.anchorNode.parent == sel.focusNode.parent ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>Parent: the jQuery objects are" + ($anchorNode.parent().is($focusNode.parent() ) ? "" : "<b> not</b>") + " the same.</p>");
                });
            });
        </script>
    </head>
<body>
    <div id="testdiv">
        Select some text inside this div and press Ctrl+C.
    </div>
    <div id="logdiv" style="border: 1pt solid black;"><p><i>Log</i></p></div>
</body>
</html>

I prepared a jsFiddle to illustrate this, but couldn't reproduce it there.

So I tried with SO's snippet widget. It works again:

$(function () {
                $("#testdiv").on("copy", function(event) {
                    var sel = window.getSelection();
                    var $anchorNode = $(sel.anchorNode);
                    var $focusNode = $(sel.focusNode);
                    $("#logdiv").append("<p>The DOM nodes are" + (sel.anchorNode == sel.focusNode ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>The jQuery objects are" + ($anchorNode.is($focusNode) ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>Parent: the DOM nodes are" + (sel.anchorNode.parent == sel.focusNode.parent ? "" : "<b> not</b>") + " the same.</p>");
                    $("#logdiv").append("<p>Parent: the jQuery objects are" + ($anchorNode.parent().is($focusNode.parent() ) ? "" : "<b> not</b>") + " the same.</p>");
                });
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testdiv">
        Select some text inside this div and press Ctrl+C.
    </div>
    <div id="logdiv" style="border: 1pt solid black;"><p><i>Log</i></p></div>

Any ideas on what's happening?

Improve this question
5
  • Yes, but with the standalone HTML source? That's where it fails for me. Commented Apr 14, 2017 at 19:01
  • indeed! Tried it now locally. Commented Apr 14, 2017 at 19:05
  • Shouldn't you move the script to the end of the body? Commented Apr 14, 2017 at 19:15
  • I managed to reproduce it in jsFiddle by placing the <script> above (like i.e: page head) ... jsfiddle.net/sh2ke2a8/2 - Strange, your code already uses the DOM ready shorthand but anyways it fails if placed in <head> Commented Apr 14, 2017 at 19:18
  • @RokoC.Buljan Well done! Is this a bug or is there some hidden reason I simply don't understand? Commented Apr 17, 2017 at 18:25
Related questions
7
Javascript / jQuery Find Text duplicates
1
String equality returning false when strings are equal
6
jquery text() not comparing to string
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.