i have function returns parent element of selection when text selected using mouse.
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; } in chrome , firefox when select link inside contenteditable paragraph, function returns correct parent node i.e. <a> in ie 10 returns parent element 'paragraph'
see jsfiddle
the reason reasonably easy find if examine selected range: when select link text in ie, end boundary @ end of text node in link, expected, while start boundary @ end of text node preceding link, not expect. common: browsers have different ideas positions within document valid selection boundaries.
a simple fix case (but not more general case more complicated html) check if range start boundary @ end of text node , move start of text node within next element:
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); } } 