检测悬停在所选文本上

Question

我正在构建一个WYSIWYG富文本编辑器.

当用户选择他/她的文本的一部分时,我想在工具提示中呈现菜单.呈现菜单工作正常但我想只显示用户将鼠标悬停在所选文本上.

如图解:

我还没有决定定位(我喜欢它的说明方式),但澄清一下,这不是问题的重点.

问题是:如何过滤选定文本上发生的悬停事件？

问题:

1. 我不能只是监听文本选择事件或测试悬停事件,以查看它们是否超出了在其中选择了文本的元素.左图像会产生误报.

2. 我知道如何获取所选文本,但我不知道如何获取所选区域.

在我看来,理想的解决方案是以某种方式计算所选文本的区域并测试鼠标悬停事件是否发生在该区域.

Answer 1

在 上mouseup，使用Range.getClientRects来抓取选择的每一行的边界矩形。

然后您可以测试鼠标是否在选择上，如下所示：

var cr= [];

$(document).on({
  'mouseup': function() {
    cr= window.getSelection().getRangeAt(0).getClientRects();
  },
  'mousemove': function(ev) {
    //hide the pop up
    for(var i = 0 ; i < 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 the pop up
        break;
      }
    }
  }
});

小提琴