Question

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

如果用户选择了一个文本，则工具提示fadesIn on＆＃34; mouseup＆＃34;事件。事件mousedown用于fadeOut工具提示。

就用户没有选择整个文本而言，一切都像魅力一样。如果（s）他这样做，然后点击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();
            });

选择例如＆＃34;创建一个LOGO＆＃34;，您将看到工具提示淡入，如果您点击div中的其他位置，工具提示将淡出。
现在选择整个文本块，即来自＆＃39; SMS＆＃39;到＆＃39; /＆＃39;。工具提示将按预期显示，但如果您单击选择或未选择的部分，工具提示将淡出并重新登录。

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

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

Answer 1

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

一个解决方案可以清楚“mousedown”的选择。类似的东西：

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

然后在你的'mousedown'功能中：

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

JQuery mousedown和mouseup事件的意外行为

1 个答案: