Lo Zibaldone Informatico - JavaScript clientX, clientY, screenX, screenY

Codice

<!DOCTYPE html>
<html>
<head>
<script>
function clientXY(e) {
    e = e || window.event;
    let x, y;

    if (e.type === "touchmove") {
        x = e.touches[0].clientX;
        y = e.touches[0].clientY;
    } else {
        x = e.clientX;
        y = e.clientY;
    }

    let coor = x + " " + y;
    document.getElementById("output1").innerHTML = "Funzione event.clientX/Y: " + coor + "";
}

function screenXY(e) {
    e = e || window.event;
    let x, y;

    if (e.type === "touchmove") {
        x = e.touches[0].screenX;
        y = e.touches[0].screenY;
    } else {
        x = e.screenX;
        y = e.screenY;
    }

    let coor = x + " " + y;
    document.getElementById("output2").innerHTML = "Funzione event.screenX/Y: " + coor + "";
}
</script>
</head>
<body>
<div id="myDiv" style="height: 250px; width: 250px; border: 1px solid #ddd; padding: 10px;">
	Muovi il mouse in questa area
</div>
<div id="output1"></div>
<div id="output2"></div>
<script>
document.getElementById("myDiv").addEventListener("mousemove", clientXY);
document.getElementById("myDiv").addEventListener("mousemove", screenXY);
</script>
</body>
</html>

Output

Muovi il mouse o usa il touchscreen in questa area