怎么获取鼠标的点击位置，并在该位置弹出一个div

请问大家一个问题:
如图所示，在textarea中，鼠标点击任何位置都会在该位置弹出一个div层。

这个该怎么做，试了很多办法都不行。最好贴上代码，谢谢了.

偷了个懒，直接用了jQuery来写了，主要就是利用点击事件拿到鼠标位置，如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .msg {
            display: block;
            margin: 10px auto 0;
            padding: 10px;
            width: 700px;
            height: 300px;
            color: #333;
            border: 1px solid #ccc;
            outline: none;
            resize: none;            
        }
        .tips {
            position: absolute;
            z-index: 99;
            background: rgba(0,0,0,0.5);
            color: #fff;
        }
    </style>
</head>
<body>
    <textarea id="J_msg" class="msg">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</textarea>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    ;(function($){
        var $doc = $(document);
        var $msg = $('#J_msg');
        var $tips = $('#J_tips');
        if (!$tips.length) {
            $tips = $('<div id="J_tips" class="tips"></div>');
            $('body').append($tips);
        }

        $doc.on('click', function(e) {
            var pageX = e.pageX,
                pageY = e.pageY;

            $tips.text('文本文本文本').css({
                top: pageY,
                left: pageX
            });                    
        });
    })(jQuery);
</script>
</body>
</html>

有问题可以找我哈

【热门文章】