html - 绑定点击事件后鼠标位置移动

Question

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

$('.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">'); 
                                                             });

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

1）当在文本框中写了一些东西，然后重新单击以生成另一个文本框。

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

以下是理想和错误案例的快照

任何帮助将不胜感激。