javascript - 如何添加单击段落中任何单词时触发的工具提示？

Question

function get_selection() 
            {
                var txt = '';
                if (window.getSelection) 
                {
                    txt = window.getSelection();
                } 
                else if (document.getSelection) 
                {
                    txt = document.getSelection();
                } 
                else if (document.selection) 
                {
                    txt = document.selection.createRange().text;
                }
                return txt; 
            }
            $(document).dblclick(function(e) 
            {
                 var t = get_selection();
                 alert(t);
            });

我想在函数内使用工具栏(toolbar.js)的JQuery插件，我们可以在其中获取双击的单词，这可能吗？请指导。

Answer 1

您可以执行此操作的一种方法是将所选文本包装在 <span/> 中。标签以便附加插件。

$(document).dblclick(function() {
    var span = document.createElement('span');
    var sel = document.getSelection();
    if (sel && sel.rangeCount) {
        var range = sel.getRangeAt(0).cloneRange();
        // wrap text in span element
        range.surroundContents(span);
        sel.removeAllRanges();
        sel.addRange(range);
        // show tooltip
        $(span).toolbar({
            content: '#toolbar-options',
            position: 'top'
        // remove span when tooltip hides
        }).on('toolbarHidden', function (e) {
            $(span).contents().unwrap('span');
        });
    }
});

Demo

这应该让您开始，因为您需要进行调整以确定所选文本是否是单词。