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

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

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