使用鼠标/光标坐标定位弹出窗口

I'm using this code to show a popup, for a mini-profile in phpBB, triggered by a mouseover event

我正在使用此代码显示一个弹出窗口,用于phpBB中的迷你配置文件,由鼠标悬停事件触发

<style type="text/css">
.popUpProfile
{
position: absolute;
z-index: 3;
         left: 100px;
        top: 200px;
font-size: 14px;
background-color: #DCEBFE;
margin: 0 10px;
padding: 5px;
width: 450px;
border: solid 2px red;
border-radius: 8px;
resize:both;
overflow:auto;
 
visibility: hidden;
}
</style>

I'm looking to use the mouse coordinates to display the popup with the top at the same level as the hovered text, ie the mouse y position, and the left of it around 200px to the right. Using this code, which I have just found

我正在寻找使用鼠标坐标来显示弹出窗口,顶部与悬停文本处于同一级别,即鼠标y位置,左侧是200px左右。使用我刚刚找到的代码

<script type="text/javascript">
window.onload = init;
function init() {
	if (window.Event) {
	document.captureEvents(Event.MOUSEMOVE);
	}
	document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
	document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
	document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
</script>

I've now got x and y variables, called cursorX and cursorY, but struggling to get these into the first code, and thus pass the coordinates to the popup. I've tried

我现在有x和y变量,称为cursorX和cursorY,但是很难将这些变量放到第一个代码中,因此将坐标传递给弹出窗口。我试过了

left: cursorX + "px"

left:cursorX +“px”

which looks like it should work from instances shown on this site, but it doesn't!

看起来它应该适用于本网站上显示的实例,但事实并非如此!

Can anyone advise on how to pass the variables, and also if the code used to obtain them is as efficient as it could be?

任何人都可以建议如何传递变量,以及用于获取它们的代码是否尽可能高效?

Any help would be appreciated (and apologies if this is old ground, but I have searched to no avail!)

任何帮助将不胜感激(并道歉,如果这是旧的,但我搜索无济于事!)

Cheers!

2 个解决方案

#1

The following code captures mouse coordinates and places your element at that position (Code taken from this Stack Overflow answer.

以下代码捕获鼠标坐标并将元素放置在该位置(代码取自此Stack Overflow答案。

document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
    var dot, eventDoc, doc, body, pageX, pageY;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

    // Use event.pageX / event.pageY here
    //now you must set your elements left and top values dynamically using JavScript
    //This assumes one element with that class name so it takes the first element 
    //returned by getElementsByClassName()
    var myElem = document.getElementsByClassName("popUpProfile")[0];

    myElem.style.left = event.pageX + "px";
    myElem.style.top = event.pageY + "px";
}

#2

Sorry, yes! (I hadn't tried it when I posted previously!)

对不起,是的! (我以前发过的时候没试过!)

#1