javascript - 如何突出显示给定坐标的单词

Question

我找到这段代码:( result of the script ):

HTML

<p>Each word will be wrapped in a span.</p><p>A second paragraph here.</p>Word: <span id="word"></span>

JavaScript

// wrap words in spans
$('p').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});


// bind to each span
$('p span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

我想要类似的东西。我需要做的是获得相同的结果，但不是突出显示光标下的单词(跨度标签)，而是需要突出显示给定像素坐标的单词(跨度标签)。 有谁知道这是否可能，我该怎么做？还是有别的办法？

谢谢!

Answer 1

也许你想使用 elementFromPoint() .使用起来非常简单，只需要传递坐标，这个函数就会返回该点下的一个元素。

对于您的特定情况，每个单词都必须位于独立元素 span、div 或其他元素中。

查看工作示例:jsfiddle

也许你想做一些更稳健的解决方案，并添加一个条件，如果在给定的坐标中没有元素(elementFromPoint() 返回它的祖先或 body 元素或 NULL(如果坐标不在可见部分)