用于移动浏览器中文本突出显示工具提示的 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

您可以获取文本选择的边界矩形，并根据该数据放置工具提示。矩形将告诉您所选内容的宽度、高度、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 事件处理程序中执行该代码。

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上测试过它。