javascript - javascript：制作一个 iframe 来获取鼠标的 x&y

Question

我有一个 iframe

<iframe id="EXAMPLE"></iframe>

已编辑：如何使 iframe 使用 javascript 实时获取鼠标坐标？

Answer 1

在 HTML 中你有这个：

<iframe src="http://example.com" id="test"></iframe>

设置一些 CSS 样式：

body {
    width: 500px;
    height: 500px;
    background-color: black;
}

#test {
    left: 10px;
    top: 10px;
    position: absolute;
}

现在，您必须在文档上获取鼠标位置。您可以使用 jQuerymousemove处理程序：

$("body").on("mousemove", function(e) {
    console.log("X: " + e.clientX + "px Y: " + e.clientY + "px");
});

然后，iframe在文档上设置位置：

function update(e) {
    $("#test").css("left", e.clientX + 10 + "px");
    $("#test").css("top", e.clientY + 10 + "px");
}

现在，只需简单地update在mousemove.

在此处查看实时预览。

如果您也想检测mousemoveon iframe，请添加pointer-events:none到iframe样式中。在这里测试。