创建一个新的div并将其显示在页面上鼠标光标所在的位置

Question

目前，圆圈被添加到html标记中的<p>。
您可以在下面看到我是如何做到的。

但是我真正想要的是在鼠标光标所在的位置创建div。
如何获得光标的位置并在那里创建div ?

谢谢。

var count = 0;
/*
 * Function(makeLetters)
 * Removes first character in text box.
 * Creates circle Letters using first character.
 */
$(document).click(function (makeLetters) {
    //Get characters currently entered into textbox
    var letters = $('#letters').val();
    //Take the firstLetter only
    var firstLetter = letters.substr(0, 1);
    //Count how many characters currently entered
    var numberOfLetters = letters.length;
    //Use length of entry to take all characters except first
    var restOfLetters = letters.substr(1, numberOfLetters);
    //All characters except first set as textbox entry
    $("#letters").val(restOfLetters);
    //Check that there is a first character
    if (firstLetter != "") {
        count++;
        //Create a new circle letter by inserting new div class
        $("p").append('<div class="circle' + count + '" style="border-radius: 50%;width:    36px;height:36px;padding:8px;background:#FF7D5C;color:black;text-align:center;font:32px Arial, sans-serif;display:inline-block;margin-right:4px;margin-bottom:4px;">' + firstLetter.toUpperCase() + '</div>');
        $("p").children().last().hide().fadeIn();
    }
});

Answer 1

据我所知，你不能自己获得鼠标位置，但你可以使用jQuery来监听mousemove事件，并将位置存储在一个变量中，以便以后使用，如下所示:

var mousePosition = { x: 0, y: 0 };
$(document).mousemove(function(e) {
    mousePosition.x = e.pageX;
    mousePosition.y = e.pageY;
});

然后你需要使用postion: [absolute/fixed];来定位基于mousePosition的div

Answer 2

您将通过从事件中获取鼠标位置来做到这一点，您出于某些奇怪的原因将其命名为makeLetters ?

$(document).click(function(event) {
    var letters         = $('#letters').val();
    var firstLetter     = letters.substr(0, 1);
    var numberOfLetters = letters.length;
    var restOfLetters   = letters.substr(1, numberOfLetters);
    var mouseLeft       = event.pageX;
    var mouseTop        = event.pageY;
    $("#letters").val(restOfLetters);
    if (firstLetter != "") {
        count++;
        var div = $('<div />', {
            'class' : 'circle' + count,
            text  : firstLetter.toUpperCase(),
            css : {
                 position: 'fixed',
                 top     : mouseTop + 'px',
                 left    : mouseLeft + 'px', 
                 display : 'none'
                 // ... the rest of the styles here
            }
        });
        $("p").append( div.fadeIn() );
    }
});