JavaScript 函数控制

Question

function here(event)
{
 var left=event.clientX+document.body.scrollLeft;
 var top=event.clientY+document.body.scrollTop;
 var obj=document.createElement("div");
 obj.style.cssText="position:absolute;left:"+left+";top:"+top+";width:100px;height:200px;background:red";
 obj.innerHTML="你吃饭了吗";
 document.body.appendChild(obj);
}<a href="javascript:void(0)" onclick="here(event)">come here</a>
怎样才可以让here（）函数只执行一次，每点一次就出来一个新的
（吃饭也不用这么频繁吧-_-|||） 

Answer 1

<script>
var div_info;
function here(event) {
var left = event.clientX + document.body.scrollLeft;
var top = event.clientY + document.body.scrollTop;
if (!div_info) {
div_info = document.createElement("div");
document.body.appendChild(div_info);
}
div_info.style.cssText = "position:absolute;left:"+left+";top:"+top+";width:100px;height:200px;background:red";
div_info.innerHTML = "你吃饭了吗";
}
</script>
<a href="javascript:void(0)" onclick="here(event)">come here</a>

Answer 2

<script>
function here(event)
{
 var left=event.clientX+document.body.scrollLeft;
 var top=event.clientY+document.body.scrollTop;
 var obj=document.createElement("div");
 obj.style.cssText="position:absolute;left:"+left+";top:"+top+";width:100px;height:200px;background:red";
 obj.innerHTML="你吃饭了吗";
 document.body.appendChild(obj);
 here = function(){};
}</script>
<a href="javascript:void(0)" onclick="here(event)">come here</a>

Answer 3

$("#id").one(function(e){
//
})

Answer 4

    var left = event.clientX + document.body.scrollLeft;
    var top = event.clientY + document.body.scrollTop;
为什么后边要加上+ document.body.scrollLeft和document.body.scrollTop
前边的event.clientX和event.clientY不就是事件发生时候鼠标的水平垂直位置么？
后边加上这个有什么用处哪位解释一下。
我在IE里试验过，不加这些显示的效果是一样的。

Answer 5

向我这种连JavaScript都不是很懂的菜鸟，你搞jQuery给我看？！

Answer 6

网页宽度过大，下边显示滚动条的时候，可以让这个div显示在正确的位置，貌似event.clientX只可以得到
鼠标相对浏览器中的位置，而不是相对文档的位置