javascript - javascript: マウスの x&y を取得する iframe を作成します

Question

私はiframeを持っています

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

編集: Javascript を使用してリアルタイムでマウスのコーディナを取得する iframe を作成するにはどうすればよいですか?

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。

ここでライブ プレビューを参照してください。

mousemoveも検出したい場合は、スタイルiframeに追加pointer-events:noneします。ここでiframeテスト済み。