找到用户点击的光标位置，并在用户点击的地方显示一个 div答案

【问题标题】：find the position of the cursor where user have clicked and display one div where user have clicked找到用户点击的光标位置，并在用户点击的地方显示一个 div
【发布时间】：2010-03-30 10:13:36
【问题描述】：

我想确定用户点击的光标位置。

并在用户点击的页面底部显示一个 div。

例如，如果有人单击徽标，则在堆栈溢出主页上。

那么 div 应该显示在 logo 的底部位置。

同样的方法，如果我点击底部链接，那么该 div 应该会显示在页面的底部。

我使用 mootools 作为我的 JS 框架。但是任何 JavaScript 代码都会对我有所帮助。

希望大家都清楚。

提前致谢
阿维纳什

【问题讨论】：

标签： javascript mootools1.2

【解决方案1】：

<head>
</script>        
function mouseX(evt) 
{
    if (evt.pageX) return evt.pageX;
    else if (evt.clientX)
        return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
function mouseY(evt) 
{
    if (evt.pageY) return evt.pageY;
    else if (evt.clientY)
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop :  document.body.scrollTop);
    else return null;
}
function clicked(evt)
{
    if(typeof evt == 'undefined')
    evt = window.event;
    alert("X = "+ mouseX(evt) + " Y= " + mouseY(evt);

}
</script></head>
<body onclick="clicked()"></body>

您可以简单地使用window.event.x, window.event.y，但这是一种更稳定可靠的获取位置的方法..

[ 而不是警报，你将更改 divElement.style.left , divElement.style.top.. 确保 div 的 position(in style) 是 absolute。 ]

【讨论】：

我试过了，但是显示下面的错误：evt is undefined

【解决方案2】：

使用原型非常简单：

document.observe('click', function(e) {
    $('YourDivId').setStyle({
        'left': e.clientX, 
        'top': e.clientY
    }).show();
});

您现在需要做的就是在您的身体上创建一个 html DIV，其中包含“display: none”和“position: absolute;”和你想要的内容。

【讨论】：