Html 绑定单击事件后的鼠标位置移动

我正在绑定单击事件以生成内容可编辑的文本框。 下面是我用来实现这一点的代码

$('.clickable-div').bind('click', function(ev) {                                                
                                    var $div = $(ev.target);
                                    var offset = $div.offset();
                                    var x = ev.clientX - offset.left;
                                    var y = ev.clientY - offset.top;

                                    $("#main-div")
                                            .append(
                                    '<div class="handle bar"  style="top:'+y+'px;left:'+x+'px">'); 
                                                             });

$（'.clickable div'）.bind（'click'，function（ev）{
var$div=$（ev.target）；
变量偏移量=$div.offset（）；
var x=ev.clientX-offset.left；
var y=ev.clientY-offset.top；
$（“主要部门”）
.附加(
''); 
});

问题是，当我单击页面时，文本框会按预期显示，但鼠标位置会突然移动到页面上的另一个位置。 此外，这种意外行为仅在以下两种情况下发生：

1） 在文本框中写入内容，然后单击“新建”以生成另一个文本框

2） 当页面滚动且旧文本框不再可见时

下面是理想情况和故障情况的快照

---

任何帮助都将不胜感激。

您应该将绝对位置添加到附加的div（手柄条）中，否则它将改变您的位置stuff@Pete，文本框将在所需位置（单击位置）创建。问题是鼠标指针在单击后移动了一段距离。另外，我已经在附加的div中添加了position:absolute是对的，我认为我没有正确理解您的问题，如果您在单击事件结束时添加

$（this）.focus（）

，该怎么办？我只是在澄清我的问题-鼠标指针会自动移动到一个全新的位置（理想情况下应该在单击的位置），这就是问题所在。但是，文本框是在正确的位置生成的