2

我希望在选择某些文本后出现一个类似气泡的工具提示。它确实有效，但是当您向下滚动并在文档末尾附近尝试它时（如果它很长），它就不起作用了。这是相当随机的。有时，工具提示出现在文档开头附近，或者它可能出现在太左或太右的位置，或者可能只出现一部分，或者根本不出现。

这是小提琴：http: //jsfiddle.net/bdAbZ/

这是代码：

// Generate the speech bubble
// Temporary placeholder
var $speechBubble = $('<p class="speech-bubble"></p>');
$speechBubble.appendTo('body');

var mousePosition;
function updateMousePosition(event) {
    /* Update the global variable mousePosition with the current location of the mouse.
    */
    mousePosition = {left: event.pageX, top: event.pageY};
}
$(document).mousemove(updateMousePosition); // mousePosition will always be up-to-date.

function getSelectedText() {
    /* Return the text that the user has selected.
    **
    ** If he hasn't selected anything, return an empty string.
    */

    // Different browsers, different ways of getting the selected text.
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else if (document.selection) {
        return document.selection.createRange().text;
    }
    else {
        // This should normally never happen.
        alert('Could not get the selected text.')
        return false;
    }
}

$('p').mouseup(function() {
    /* Check if the user has selected any text within the p area.
    **
    ** If he has, show the speech bubble menu.
    */
    var selectedText = getSelectedText();
    if (selectedText != '') {
        $speechBubble.text(selectedText);
        $speechBubble.offset(mousePosition);
        $speechBubble.show();
    }
});

$(document).mouseup(function() {
    /* Check if no text has been selected.
    **
    ** If no text has been selected, hide the speech bubble menu.
    **
    ** Why? The user would probably try to get rid of the speech bubble by clicking somewhere else.
*/
    if (getSelectedText() == '') {
        $speechBubble.hide();
    }
});
4

2 回答 2

1

我在这里做了一个小提琴：http: //jsfiddle.net/bdAbZ/8/

气泡现在绝对定位。我还根据 mouseup 上的光标将对话气泡居中。

让我知道这是否适合您...

更新：我更新了一些东西，比如我删除了你的 mousemove 监听器，因为这会占用大量内存。在 mouseup 事件之前，您不需要更新光标位置。我还正确地将您的 mouseup 侦听器委托给了这些段落。这一切都假设它不会破坏您没有向我们展示的任何代码：http: //jsfiddle.net/bdAbZ/9/

于 2012-10-15T19:07:03.297 回答
0

这个怎么样？

http://jsfiddle.net/bdAbZ/5/

当您可以在鼠标向上事件中获取鼠标位置时，我不确定您为什么要在鼠标移动中跟踪鼠标位置。另外，我绝对定位了演讲泡泡班。

编辑：仍然搞砸的一件事是，如果您双击选择一个单词。

于 2012-10-15T18:27:50.417 回答