Question

我想在移动浏览器（例如Android中的Chrome）中选中的文本旁边打开工具提示。由于在移动浏览器中选择文本不会触发鼠标事件，因此无法使用mouseup事件。

document.addEventListener("selectionchange", function(event) {

    var text = window.getSelection().toString();
    var tooltip = document.getElementById('tooltip');
    var x = event.clientX; // The problem
    var y = event.clientY; // The Problem
    tooltip.innerHTML = text;
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

问题是ClientX和ClientY与selectionchange不兼容。

检查JSFiddle。

Answer 1

您可以获得文本选择的bounding rect并根据该数据放置工具提示。矩形将告诉您所选内容的宽度，高度，x，y，顶部，右侧，底部和左侧。

document.addEventListener("selectionchange", function(event) {
  const selection = window.getSelection();
  
  if (selection.rangeCount === 0) {
    return;
  }

  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  const text = selection.toString();
  const tooltip = document.getElementById('tooltip');

  tooltip.innerHTML = text;
  tooltip.style.top = rect.bottom + 5 + 'px'; // 5px offset
  tooltip.style.left = rect.x + 5 + 'px';     // 5px offset
  tooltip.style.position = 'absolute';
  tooltip.style.background = 'lightgreen';
});

This is some text
<div id="tooltip">

Answer 2

您可以添加mouseup事件并在mouseup事件处理程序中执行该代码。

{
  "data": {
    "title": "Title",
    "body": "Body"
  },
  "to" : ""
}

我也在jsFiddler上进行了测试。

移动浏览器中用于文本突出显示的Javascript工具提示

2 个答案: