javascript - 检测悬停在选定文本上

Question

我正在构建一个所见即所得的富文本编辑器。

当用户选择他/她的一部分文本时，我想在工具提示中显示一个菜单。显示菜单效果很好，但我只想在用户将鼠标悬停在所选文本上时显示它。

如图所示:

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

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

问题:

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;
      }
    }
  }
});

Fiddle