javascript - 在 contenteditable div 中突出显示的文本上方显示弹出窗口？

Question

我正在我的一个应用程序中构建一个简单的博客式功能，并使用 HTML5 contenteditable 属性，因为它很干净。但是，我现在需要做的是，当用户在 contenteditable div 中突出显示某些文本时，需要在其上方出现一个弹出窗口。现在我有一个获取选定文本的函数，它绑定(bind)到 DIV 的 mouseup()。但是，当我单击进入 contenteditable div 时，该功能被触发。

这是我的代码:

function getSelected() {
            if (window.getSelection) {
                return window.getSelection();
            }
            else if (document.getSelection) {
                return document.getSelection();
            }
            else {
                var selection = document.selection && document.selection.createRange();
                if (selection.text) {
                    return selection.text;
                }
                return false;
            }
            return false;
        };

$("#content-create-partial").bind("mouseup", function(){
                var text = getSelected();
                if(text) {
                    console.log(text);
                }
                else{
                    console.log("Nothing selected?");
                };
            });

如何防止调用在用户点击 contenteditable div 时触发，并且仅在他们突出显示某些文本时触发？

Answer 1

$("#content-create-partial").bind("mouseup", function(){
 if (document.getSelection) {
                var text = getSelected();
                if(text) {
                    console.log(text);
                }
                else{
                    console.log("Nothing selected?");
                }


  } 
         });