javascript - 单击点时将 div 浮动到画布上方的代码

Question

我有一个 HTML5 画布元素和一个用于单击的事件侦听器，我需要将其链接到一个浮动 div，该 div 出现在用户单击画布的位置。最佳方法的代码建议？

我正在跟踪鼠标位置：

        var pos = getMousePos(canvas, evt);
        mousePos.x = pos.x;
        mousePos.y = pos.y;

Answer 1

这应该可以解决问题：

HTML：

<div style="position: relative">
    <canvas />
    <div style="position: absolute" id="floatingDiv">Floating div</div>
</div>

Javascript：

var pos = getMousePos(canvas, evt);
mousePos.x = pos.x;
mousePos.y = pos.y;
var floatingDiv = document.getElementById('floatingDiv');
floatingDiv.style.top = pos.y + 'px';
floatingDiv.style.left = pos.x + 'px';