鼠标悬停时突出显示的单词

Posted 2023-03-04

【中文标题】鼠标悬停时突出显示的单词

【英文标题】：Words highlight on mouse over

【发布时间】：2014-01-01 05:44:58

【问题描述】：

你知道高亮单词和添加鼠标悬停事件的最有效方法吗？

我有文本，我想制作某种单词解释字段，所以当用户将光标放在单词上时，我调用 AJAX 到字典并显示他的意思。

我有两个想法： 1）在显示文本之前，将每个单词放入<span onmouseon="my_foo("word");"> wrapper。 例如：

<span onmouseon="my_foo("Hello");">Hello</span><span onmouseon="my_foo("world");">world</span>

但我认为这会使页面严重超载。

2) 当用户在一个区域按住光标超过 0.5 秒时，我得到指针坐标，计算显示的单词（我不知道是否可能）并进行 AJAX 调用。

你认为什么更好，更容易编码？

【问题讨论】：

我不认为 2 是可能的，因为不同浏览器中字体渲染的差异。你永远不会确切地知道它是哪个词。我会在服务器端包装所有内容。或 onLoad 将所有内容包装在跨度中。悬停在该类的任何跨度上都会调用 ajax

2 是可能的。但是您将面临不同浏览器的问题。我确实以相同的方式实现了注释功能。这很艰难。对于 1，在事件函数定义中有更好的方法，您可以获取 span 的内部文本，因此您不需要将字符串放在每个调用中。

情况 1 的性能如何？还好吗？例如，我的意思是 5000 字的文本。

【参考方案1】：

我觉得1很简单，可以这样实现：

小提琴：http://jsfiddle.net/9d227/

HTML

<div id="yourDiv" style="Display: none;">your Text Here</div>
<div id="yourActualDiv"></div>

JQuery

var wordArray = $('#yourDiv').html().split(' ');
var totalString = "";
for(var i=0;i<wordArray.length;i++)
    totalString += "<span>" + wordArray[i] + " </span>";
$('#yourActualDiv').html(totalString);
var ConcurrenyFlag = 0;
$('#yourActualDiv span').mouseover(
    function()
    
       if(ConcurrenyFlag == 0)
       
           ConcurrenyFlag = 1;
           // Your code here.
           ConcurrenyFlag = 0;
       
    
)

这样，您只需将文本放入yourDiv。 javascript 代码将为您处理其余部分。 希望对您有所帮助。

ConcurrenyFlag 将有助于减少客户端的负载，因为一次只能运行一个代码部分。

【参考方案2】：

这样的事情应该做一些接近你正在寻找的事情。

$('.addWordDictionary').html('<span>'+$('.addWordDictionary').html().replace(/ 1,/g, '</span> <span>')+'</span>');

但是，正如您所说，它可能需要大量客户端，尤其是在有大量文本的情况下。

【参考方案3】：

你可以使用 Lettering.js 来解决这个问题

http://letteringjs.com/

简化示例：

http://jsfiddle.net/Zzxpx/

HTML：

<div class="w">"You will die of suffocation, in the icy cold of space"<div>

JS：

$(".w").lettering('words');

【参考方案4】：

首先突出显示光标下的单词然后显示它的含义，检查我的小提琴：http://jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

    <div>
        <span>This text is a test text</span>
    </div>

JavaScript

$('div').each(function() 
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
);

$('div span').hover(
    function()  
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    ,
    function()  
        $(this).css('background-color',''); 
    
);

function getTheMeaningOfTheWord(word)

    return word+' = theMeaning';

【讨论】：

我是否需要刷新 DOM 或其他东西。我做了试验： 一些 onmouseover 工作，但悬停不。

你不需要刷新任何东西，你运行小提琴了吗？

@Tigran 在小提琴中看到我的代码，我的 span 上没有任何 onmouseover 功能

它可以在 iframe 中工作吗？我试过你的代码。我已经分开了跨度并给出了类名。所以我使用：$('word_in_text').hover()。可能是我做错了什么，但它会在 iframe 中工作吗？

$('word_in_text') 是无效的 jquery 选择器，您必须像这样放置 span 或元素的 id：$('#word_in_text')。你能给我看看你的代码吗？

【参考方案5】：

我制作了这些东西：http://jsfiddle.net/wared/eAq9k/。需要一个 textarea 并通过单击而不是悬停来工作。有关getCaret() 的更多详细信息，请点击此处：https://***.com/a/263796/1636522。

<textarea readonly>Lorem ipsum</textarea>

textarea 
    display: block;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: .5em 0;

$(function () 
    var el = $('textarea'),
        text = el.text();
    el.click(function () 
        var i = getCaret(this),
            w = getWord(text, i);
        $('p').text(i + ' : "' + w + '"');
    );

    // https://***.com/a/995374/1636522

    el[0].style.height = '1px';
    el[0].style.height = 25 + el[0].scrollHeight + 'px';
);

function getWord(s, i) 
    var r = /\s/g;
    while (i && !r.test(s[--i])) 
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) ||  index: s.length 
    ).index);