javascript - jQuery doesn't recognize identical textnodes (sometimes) -
i wanted use jquery tweak copy-mechanism. noticed when anchor , focus nodes of selection same, corresponding jquery objects (compared using .is
method) not.
in chrome , firefox (windows) comparison fails in 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>") + " same.</p>"); $("#logdiv").append("<p>the jquery objects are" + ($anchornode.is($focusnode) ? "" : "<b> not</b>") + " same.</p>"); $("#logdiv").append("<p>parent: dom nodes are" + (sel.anchornode.parent == sel.focusnode.parent ? "" : "<b> not</b>") + " same.</p>"); $("#logdiv").append("<p>parent: jquery objects are" + ($anchornode.parent().is($focusnode.parent() ) ? "" : "<b> not</b>") + " same.</p>"); }); }); </script> </head> <body> <div id="testdiv"> select text inside div , press ctrl+c. </div> <div id="logdiv" style="border: 1pt solid black;"><p><i>log</i></p></div> </body> </html>
i prepared jsfiddle illustrate this, couldn't reproduce there.
so tried so's snippet widget. 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>") + " same.</p>"); $("#logdiv").append("<p>the jquery objects are" + ($anchornode.is($focusnode) ? "" : "<b> not</b>") + " same.</p>"); $("#logdiv").append("<p>parent: dom nodes are" + (sel.anchornode.parent == sel.focusnode.parent ? "" : "<b> not</b>") + " same.</p>"); $("#logdiv").append("<p>parent: jquery objects are" + ($anchornode.parent().is($focusnode.parent() ) ? "" : "<b> not</b>") + " same.</p>"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="testdiv"> select text inside div , press ctrl+c. </div> <div id="logdiv" style="border: 1pt solid black;"><p><i>log</i></p></div>
any ideas on what's happening?
Comments
Post a Comment