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

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

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

var tooltip = document.getElementById('tooltip');
document.addEventListener("selectionchange", function(event) {
    var text = window.getSelection().toString();
    tooltip.innerHTML = text;
});

document.addEventListener("mouseup", function(event){
    var x = -1000;
    var y = -1000;
    if(tooltip.innerHTML!=""){
        x =event.clientX;
        y = event.clientY;
    }
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

我也在 jsFiddler 上测试过。

Answer 2

您可以获得文本选择的 bounding rect 并根据该数据放置工具提示。 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">

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

Javascript for text highlight tooltip in mobile browsers

javascript

mobile-browser