2

我正在开发一个小型 Web 应用程序，用户在从 div 中选择一段文本（contenteditable = true）后会获得一个带有选项的工具提示。

如果用户选择一个文本，fadesIn “mouseup”事件的工具提示。该事件mousedown用于fadeOut工具提示。

只要用户不选择整个文本，一切都像魅力一样。如果他这样做了，然后单击 div 上的其他位置，则工具提示会淡出并再次出现。

可以在以下位置找到此行为的示例：http: //jsfiddle.net/7NEk3/275/ 事件编码如下：

            $('#show-bubb-text').mouseup(function(e) {
                var selection = getSelected();
                if (selection && (selection = new String(selection).replace(/^\s+|\s+$/g, ''))) 
                {
                    selectionImage.attr('href', 
                    url.replace('{term}', encodeURI(selection))).css({
                        top: e.pageY - 30, //offsets
                        left: e.pageX - 13 //offsets
                    }).fadeIn();
                }
            });

            $(document.body).mousedown(function() {
                selectionImage.fadeOut();
            });

  1. 选择例如“CREATE A LOGO”，你会看到一个工具提示淡入，如果你点击 div 中的其他地方，工具提示将淡出。

  2. 现在选择整个文本块，即从“SMS”到“/”。工具提示将按预期显示，但如果您单击选择或未选择的部分，工具提示将淡出并重新显示。

这是预期的行为吗？我究竟做错了什么？

编辑：这似乎在 Firefox 上运行良好。但是，它不在 Chrome 或 Safari 上。

4

1 回答 1

0

当您在活动选择中单击时会发生这种情况。您可以通过进行任何选择并在活动选择内单击来重新创建它。原因是事件被调用的顺序。在调用“getSelection”函数之前，不会清除活动选择。因此，您的应用程序正在检测活动选择，即使选择在您“鼠标上移”后立即被清除。

一种解决方案可能是清除“mousedown”上的选择。就像是：

function clearSelection() {
    if ( document.selection ) {
        document.selection.empty();
    } else if ( window.getSelection ) {
        window.getSelection().removeAllRanges();
    }
}

然后在你的'mousedown'函数中：

$(document.body).mousedown(function() {
     clearSelection();
     selectionImage.fadeOut();
});
于 2013-02-25T17:26:48.313 回答