javascript - 在更改屏幕分辨率时使用不支持的javascript动态创建div元素

Question

我通过获取 div 的 X 和 Y 坐标在鼠标单击位置的 div 内添加图像。它运行良好，图像被添加到鼠标单击的位置。但是当我尝试更改屏幕分辨率时，图像被移动到了它们不在 div 中的地方。我需要设计此屏幕以支持所有屏幕分辨率(也适用于移动设备和 Surface)。谁可以帮我这个事。提前致谢。

这是我的工作代码:

<script language="JavaScript">
function mouseclicked(event) {
    var img = document.createElement('img')
    img.src = "Printers/printer2.jpg";
    img.width = '50';
    img.height = '50';
    img.style.position = "absolute";
    img.style.left = event.pageX + "px";
    img.style.top = event.pageY + "px";
    $('#maindiv').append(img);
}
</script>

Answer 1

在将图像附加到主 div(div 是您的主 div 元素)之前将此添加到您的代码中:

var divPos = mydiv.getBoundingClientRect ();
     img.style.position = "relative";
     img.style.left = divPos.left + (event.pageX - divPos.left) + "px";
     img.style.top = divPos.top + (event.pageY - divPos.top)  + "px";