javascript - Detect hover on selected text -
i building wysiwyg rich text editor.
when user selects portion of his/her text, present menu in tooltip. presenting menu works fine show if user hovers on selected text.
as illustrated:
i haven't decided on positioning (i way it's illustrated) clarify, that's not point of question.
the question is: how filter hover event happens on selected text?
the problems:
i can't listen text selection event or test hover events see whether on elements have selected text inside them. left image generate false positive that.
i know how selected text don't know how selected region.
to mind, the ideal solution somehow calculate region of selected text , test whether mouseover events happen in region.
on mouseup
, use range.getclientrects grab bounding rectangles of each line of selection.
you can test if mouse on selection this:
var cr= []; $(document).on({ 'mouseup': function() { cr= window.getselection().getrangeat(0).getclientrects(); }, 'mousemove': function(ev) { //hide pop for(var = 0 ; < cr.length ; i++) { if(ev.pagex >= cr[i].left && ev.pagex <= cr[i].right && ev.pagey >= cr[i].top && ev.pagey <= cr[i].bottom ) { //show pop break; } } } });
Comments
Post a Comment