我想确定用户点击的光标位置。
并在用户点击的页面底部显示一个 div。
例如,如果有人单击徽标,则在 stack over flow 主页上。
然后 div 应该显示在 logo 的底部位置。
同样,如果我单击底部链接,则该 div 应该显示在页面的底部。
我使用 mootools 作为我的 JS 框架。但是任何 JavaScript 代码都会对我有所帮助。
希望大家都清楚这一点。
在此先感
谢阿维纳什
我想确定用户点击的光标位置。
并在用户点击的页面底部显示一个 div。
例如,如果有人单击徽标,则在 stack over flow 主页上。
然后 div 应该显示在 logo 的底部位置。
同样,如果我单击底部链接,则该 div 应该显示在页面的底部。
我使用 mootools 作为我的 JS 框架。但是任何 JavaScript 代码都会对我有所帮助。
希望大家都清楚这一点。
在此先感
谢阿维纳什
<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
(样式)是absolute
. ]
使用原型非常简单:
document.observe('click', function(e) {
$('YourDivId').setStyle({
'left': e.clientX,
'top': e.clientY
}).show();
});
您现在需要做的就是在您的身体上创建一个 html DIV,其中包含“display:none”和“position:absolute;” 和你想要的内容。