使用鼠標/光標坐標定位彈出窗口

Question

我正在使用此代碼顯示由鼠標懸停事件觸發的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> 

我正在尋找使用鼠標坐標來顯示彈出窗口，其頂部與懸停的文本處於同一級別，即鼠標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> 

現在，我有了x和y變量，分別稱為cursorX和cursorY，但是很難將它們放入第一個代碼中，從而將坐標傳遞給彈出窗口。 我試過了

左：cursorX +“ px”

看起來應該可以在此網站上顯示的實例上正常工作，但事實並非如此！

任何人都可以建議如何傳遞變量，以及用於獲取變量的代碼是否盡可能有效？

任何幫助將不勝感激（如果這是舊的道歉，請您道歉，但我搜索沒有用！）

干杯!

Answer 1

以下代碼捕獲鼠標坐標並將您的元素放置在該位置（ 此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";
}

Answer 2

對不起，是的！ （我以前發布時還沒有嘗試過！）