jquery - jquery中点击事件获取段落中的当前单词

Question

我正在尝试构建一个工具，允许人们获取单词或短语(在选择时)，选择部分已完成，但单词部分尚未完成。

当有人点击某个单词时，我需要能够获取当前单词，我找到了这个解决方案

get word click in paragraphs

不幸的是，这段代码更改了所有单词并添加了 <span>对于每个单词，这都会给我带来问题，因为我无法在文本中添加 html 标签(可以导入或动态添加 css 文件)

如果可能的话，是否有更好的方法来实现这一目标？

例如:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor ante sit amet nisl consequat volutpat.

如果我点击“坐”，那么我会提醒“坐”

Answer 1

好吧，对于您的解决方案，您将需要使用 selections 和 doubleclick 事件作为一件棘手的事情，并通过 doubleclick 事件获取生成范围内的选定单词。

如果您不想引入新标签，就没有其他办法。

<小时/>

试试这个:

现场演示: http://jsfiddle.net/oscarj24/5D4d3/

$(document).ready(function() {

    /* set hand cursor to let know the user that this area is clickable */
    var p = $('p');
    p.css({ cursor: 'pointer' });

    /* doubleclick event working with ranges */
    p.dblclick(function(e) {
        var selection = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(selection.toString());
        if(word != '') {
            alert(word);
        }
        /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */
        selection.collapse();
        e.stopPropagation();
    });

});​

希望这有帮助:-)