Moderní tvorba webových aplikací

O webu

Zjištění souřadnic myši

Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).

2 minuty

V některých situací (jako třeba u efektu baterky nebo kontextové nabídky) je třeba skriptem sledovat, kde je umístěn kursor. Universální JS funkce sjednocující chování napříč prohlížeči (hlavně IE a ostatní prohlížeče) může vypadat takto:

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};

    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
    return cursor;
}

Použití je potom následovné:

var souradnice = getPosition(e);
  • V souradnice.x bude X-ová souřadnice (nebo také left hodnota).
  • V souradnice.y bude Y-ová souřadnice (nebo také top hodnota).

Při nastavování CSS se nesmí zapomenout na přidání jednotky px.

neco.style.left = souradnice.x + "px";
neco.style.top = souradnice.y + "px";

Při používání funkce je nutné předávat event.

<script>
function funkce(e) {
  var souradnice = getPosition(e);
}
</script>
<p onclick='funkce(event)'>

Související články

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025