Zjištění souřadnic kursoru

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)'>

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře